Categorías: jQuery

jQuery slideDown(), slideUp() y slideToggle(): Efectos de acordeón

Nueva entrada con 3 nuevos efectos de transición de jQuery, son jQuery slideDown(), slideUp() y slideToggle().

Estas funciones son muy usadas para hacer slideshows, sliders o el conocido efecto acordeón. Se pueden combinar con otras funciones de jQuery como los efectos fading (fadeIn, fadeTo, fadeToggle, fadeOut), con show() y hide() o con jQuery animate() para realizar animaciones CSS con elelementos del DOM.

Estos efectos no suelen causar conflitos de jQuery, pero si vuestra web tiene bastantes funciones JQ no dudéis en caso de incompatibilidades usar jQuery noConflict().

Vuelvo a enumerar las 3 funciones con una sencilla explicación de su funcionamiento:

jQuery slideDown(): Muestra un elemento con un efecto de deslizamiento (acordeón).
jQuery slideUp(): Oculta un elemento el efecto de deslizamiento (acordeón).
jQuery slideToggle(): Muestra u oculta un elemento con efecto de deslizamiento (acordeón).

Resumiendo podemos decir que los efectos ‘Sliding’ de jQuery:

Muestran u ocultan elementos de la web utilizando un efecto de deslizamiento.

Sintaxis de jQuery slideDown()

Tal y como comenté arriba la función slideDown muestra un elemento usando un efecto de deslizamiento, su sintaxis extraída de web oficial es la siguiente:

$(elemento).slideDown(speed,easing,callback)

Comento los parámetros que podemos pasar a esta función:

elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘. por defecto 400.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
callback (opcional): Función callback que se ejecutará cuando el efecto se haya completado.

Sintaxis de jQuery slideUp()

La función slideUp oculta un elemento usando un efecto de deslizamiento, su sintaxis extraída de web oficial es la siguiente:

$(elemento).slideUp(speed,easing,callback)

Comento los parámetros que podemos pasar a esta función (los mismos que en slideDown):

elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘. por defecto 400.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

Sintaxis de jQuery slideToggle()

La función slideToggle muestra y/o oculta un elemento usando un efecto de deslizamiento, su sintaxis extraída de web oficial es la siguiente:

$(elemento).slideToggle(speed,easing,callback)

Comento los parámetros que podemos pasar a esta función (los mismos que en slideDown y slideUp):

elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘. por defecto 400.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

Ejemplos de funcionamiento de jQuery slideDown(), slideUp() y slideToggle()

Bueno…. tras la parrafada que os he metido para ver la sintaxis de estas 3 fuciones de jQuery llega el turno de los ejemplos.

Voy a intentar hacer una demo parecida a la de los efectos Fading (fadeIn, fadeOut, fadeTo y fadeToggle) con varios botones para probar los efectos de acordeón.

Os dejo el código de la demo de ejemplo de jQuery slideDown, slideUp y slideToggle:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
  $("#down01").click(function(event) {
   $("#rectangulo").slideDown();
  });
  $("#down02").click(function(event) {
   $("#rectangulo").slideDown(4000);
  });
  $("#down03").click(function(event) {
   $("#rectangulo").slideDown("fast");
  });
  $("#down04").click(function(event) {
   $("#rectangulo").slideDown("fast", function() {
    alert ('Efecto slideDown con velocidad fast terminado!');
   });
  });

  $("#up01").click(function(event) {
   $("#rectangulo").slideUp();
  });
  $("#up02").click(function(event) {
   $("#rectangulo").slideUp(4000);
  });
  $("#up03").click(function(event) {
   $("#rectangulo").slideUp("slow");
  });
  $("#up04").click(function(event) {
   $("#rectangulo").slideUp("slow", function() {
    alert ('Efecto slideUp con velocidad slow terminado!');
   });
  });

  $("#toggle01").click(function(event) {
   $("#rectangulo").slideToggle();
  });
  $("#toggle02").click(function(event) {
   $("#rectangulo").slideToggle(4000);
  });
  $("#toggle03").click(function(event) {
   $("#rectangulo").slideToggle("slow", function() {
    alert ('Efecto slideToggle con velocidad slow terminado!');
   });
  });
 });
</script>

Voy a comentar el código por partes, los efectos se realizan cuando se pulsan los botones de la demo, esta pulsación se detecta con la función jQuery click():

En la línea 1 hago la llamada a la librería de jQuery.
En las líneas 5, 8, 11 y 14 se realizan los efectos de acordeón mostrando (slideDown) el rectángulo con los parámetros por defecto, 4000 milisegundos, ‘fast‘ y callback con velicidad ‘fast‘.
En las líneas 20, 23, 26 y 29 se realiza el efecto de deslizamiento ocultando (slideUp) el rectángulo con los parámetros por defecto, 4000 milisegundos, ‘slow‘ y callback con velicidad ‘slow‘.
Y para terminar en las líneas 35, 38 y 41 se muestra u oculta (slideToggle) el rectángulo con el efecto acordeón con los parámetros defecto, 4000 milisegundos y callback con velicidad ‘slow‘.

Concluyendo os pongo el código de los botones:

<input type="button" id="up01" value="Ocultar con slideUp()">
<input type="button" id="down01" value="Mostrar con slideDown()">
<input type="button" id="up02" value="Ocultar con slideUp() en 4000 milisegundos">
<input type="button" id="down02" value="Mostrar con slideDown() en 4000 milisegundos">
<input type="button" id="up03" value="Ocultar con slideUp() con 'slow'">
<input type="button" id="down03" value="Mostrar con slideDown() con 'fast'">
<input type="button" id="up04" value="Ocultar con slideUp() con 'slow' y callback">
<input type="button" id="down04" value="Mostrar con slideDown() con 'fast' y callback">
<input type="button" id="toggle01" value="Mostrar / ocultar con slideToggle()">
<input type="button" id="toggle02" value="Mostrar / ocultar con slideToggle() en 4000 milisengos">
<input type="button" id="toggle03" value="Mostrar / ocultar con slideToggle() con 'slow' con callback">