Método slideToggle
El método slideToggle muestra suavemente
elementos ocultos y oculta los visibles.
Sintaxis
Visualización/ocultación en un tiempo determinado,
400ms por defecto:
.slideToggle(duración);
El tiempo se puede especificar no solo en milisegundos,
sino también con palabras clave slow (600ms)
y fast (200ms), cuanto mayor sea el valor,
más lenta será la animación:
.slideToggle('slow' o 'fast');
Si no se especifican parámetros, no habrá animación, los elementos se mostrarán/ocultarán instantáneamente:
.slideToggle();
También se puede pasar una función de easing como segundo parámetro, y una función callback como tercer parámetro - se ejecutará después de completar la animación. Ambos parámetros son opcionales:
.slideToggle(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:
.slideToggle(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 se puede consultar para el método
animate. Por ejemplo,
establezcamos la duración y la función de easing:
.slideToggle( {duration: 600, easing: easeInSine} );
Ejemplo
Después de hacer clic en el botón, ocultemos suavemente
el div padre que contiene los párrafos,
usando el método slideToggle (este div
lo encontraremos usando el método
parent),
después de hacer clic nuevamente en el botón, el div
se mostrará suavemente de nuevo y así sucesivamente. Pasando la palabra clave
slow, estableceremos la velocidad en 600ms:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
