Método slideDown

El método slideDown muestra suavemente elementos ocultos, desplegándolos de arriba a abajo. Ocultar elementos se puede hacer con el método slideUp.

Sintaxis

Visualización durante un tiempo determinado, 400ms por defecto:

.slideDown(duración);

El tiempo se puede especificar no solo en milisegundos, sino también con las palabras clave slow (600ms) y fast (200ms), cuanto mayor sea el valor, más lenta será la animación:

.slideDown('slow' o 'fast');

Si no se especifican parámetros, no habrá animación, los elementos se mostrarán instantáneamente:

.slideDown();

También se puede pasar una función de easing como segundo parámetro, y un callback como tercer parámetro - se ejecutará después de completar la animación. Ambos parámetros son opcionales:

.slideDown(duración, [función de easing], [función callback]);

Se pueden pasar varias opciones al método, en forma de objeto JavaScript, que contenga pares clave: valor:

.slideDown(opciones);

Dicho objeto puede pasar los siguientes parámetros y funciones - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. La descripción de estos parámetros la puedes ver para el método animate. Por ejemplo, establezcamos la duración y la función de easing:

.slideDown( {duration: 600, easing: easeInSine} );

Ejemplo

Después de hacer clic en el botón, mostremos suavemente el párrafo oculto usando el método slideDown. Pasando la palabra clave slow, estableceremos la velocidad a 600ms. Después de que termine la animación, mostraremos en la consola 'Animation complete':

<button>show text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

Véase también

método slideUp,
que oculta suavemente elementos
método slideToggle,
que alterna la visualización/ocultación suave de elementos
método fadeIn,
que muestra suavemente elementos ocultos, haciéndolos opacos
método show,
que muestra suavemente elementos