Cómo crear el efecto slide en jQuery

El efecto slide en jQuery consiste en deslizar un elemento hasta que desaparezca o aparezca en nuestra vista. Este post explicará cómo crear el efecto slide con las diferentes funciones que nos proporciona jQuery.

Como sucede con las otras animaciones, podremos asignar una velocidad en milisegundos para conseguir que la animación tenga la fluidez que necesitamos.

Efecto slide con slideDown()

Hace que un elemento oculto aparezca. En cuanto el elemento aparece, cualquier elemento que esté debajo se empujará hacia abajo. Este efecto no funciona si el elemento ya está visible en la página. Como en las animaciones anteriores, de no especificar una velocidad, establecerá 400 milisegundos por defecto.

slideUp()

Elimina un elemento de la vista elevando su parte inferior y moviendo cualquier elemento que tuviera debajo hacia arriba hasta que dicho elemento desaparece. También establece 400 milisegundos cómo velocidad de la animación si no especificamos nada.

slideToogle ()

Aplica slideDown() si el elemento está oculto y slideUp si el elemento es visible.

Ejemplo práctico de efecto slide

Para el ejemplo vamos a necesitar un formulario muy sencillo. Se divide en 2 div, uno que constará de un header con un vínculo que activará la animación y el otro que contiene el formulario con los inputs y será el objetivo del efecto slide .

Las reglas de CSS son las siguientes

Y este el HTML

Ahora el jQuery que iría justo antes del cierre del <body>. Este código lo que hará es que cuando pulsemos en vínculo «Login» se realizará la animación fade correspondiente. Podemos realizarlo de  2 formas, una de ellas es con slideToggle lo cual ahorra trabajo o emplear tanto slideUp como slideDown pero habría que comprobar si el div «formContainer» está oculto o no para saber que animación hay que realizar.

Tanto una forma como otra dará el siguiente resultado

efecto slide en jquery - Resultado final

Resultado final

Y hasta aquí el efecto slide en jQuery, espero que os haya gustado. A seguir picando 🙂