Estoy haciendo una zona de registro y login, ya puse que al darle a un enlace(registrarse-¿Ya tengo cuenta?) la zona deseada aparezca y la otra desaparezca, esto lo logré con jquery. Ahora lo que quiero hacer es que al cambiar de sección este cambio se realice de forma lenta o con algún efecto para que no sea vea tan brusco el cambio, no sé si sea posible. De ante mano muchas gracias.
$("#registrarse").click(function(){
$("#conjunto").hide();
$("#for").show();
});
</script>
<script type="text/javascript">
$("#ingresar").click(function(){
$("#for").hide();
$("#conjunto").show();
});
#for {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="form-register" >
<form class="" action="registers.php" method="post" id="for">
<h4>Formulario Registro</h4>
<input class="controls" type="text" name="nombres" id="nombres" placeholder="Ingrese su Nombre">
<input class="controls" type="text" name="apellidos" id="apellidos" placeholder="Ingrese su Apellido">
<input class="controls" type="email" name="correo" id="correo" placeholder="Ingrese su Correo">
<input class="controls" type="password" name="contraseña" id="correo" placeholder="Ingrese su Contraseña">
<p>Estoy de acuerdo con <a href="#">Terminos y Condiciones</a></p>
<input class="botons" type="submit" value="Registrar">
<p><a href="#" id="ingresar">¿Ya tengo cuenta?</a></p>
</form>
<form class="" action="" method="" id="conjunto">
<h4>Formulario Registro</h4>
<input class="controls" type="email" name="correo" id="correo" placeholder="Ingrese su Correo">
<input class="controls" type="password" name="contraseña" id="correo" placeholder="Ingrese su Contraseña">
<p>Estoy de acuerdo con <a href="#">Terminos y Condiciones</a></p>
<input class="botons" type="submit" value="Registrar">
<p><a href="#" id="registrarse">Registrarse</a></p>
</form>
</section>