Hola, este es es segundo post sobre las animaciones en jQuery y vamos a revisar algunas funciones bastante útiles.

Cuando implementamos efectos como el siguiente:

1: $("selector").fadeIn().fadeOut().fadeIn().fadeOut();

En el caso anterior los efectos son colocados en una cola, y los efectos son ejecutados uno tras otro.

Para administrar las colas de las animaciones jQuery ofrece algunas funciones como:

  • clearQueue(): Elimina los efectos que no han sido ejecutados.
  • delay(): Retrasa cierto tiempo la ejecución del siguiente efecto.
  • dequeue(): Ejecuta el siguiente efecto
  • queue(): Permite añadir una función al finalizar la ejecución de todos los efectos en la cola.
  • stop(): Detiene una cola de animación.

Bueno ahora vamos a realizar un ejemplo.

  1. Crear las diferentes opciones que se van a tener:
1: <divid="divOpciones"> 2: <labelid="lblIniciar"class="opciones">Iniciar animacioneslabel> 3: | 4: <LabelID="lblDetener"class="opciones">Detener animacionesLabel> 5: | 6: <labelid="lblLimpiar"class="opciones">Limpiar colalabel> 7: | 8: <labelid="lblDelay"class="opciones">Demorar efectoslabel> 9: | 10: <labelid="lblQueue"class="opciones">Queuelabel> 11: div>
  1. Crear un div que será el que se animará:
1: <divid="divAnimar">div>
  1. Finalmente crear el código jQuery para cada una de las opciones:
1: $(function () { 2: $("#lblIniciar").click(function () { 3: $("#divAnimar").fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow'); 4: }); 5: $("#lblDetener").click(function () { 6: $("#divAnimar").stop(true); 7: }); 8: $("#lblLimpiar").click(function () { 9: $("#divAnimar").clearQueue(); 10: }); 11: $("#lblDelay").click(function () { 12: $("#divAnimar").fadeOut('slow').delay(1000).fadeIn('slow').delay(1000).fadeOut('slow').delay(1000).fadeIn('slow').delay(1000).fadeOut('slow').delay(1000).fadeIn('slow'); 13: }); 14: $("#lblQueue").click(function () { 15: $("#divAnimar").fadeOut('slow', function () { 16: $(this).queue(function () { 17: $(this).css({ 18: "width": "150px", 19: "height": "150px", 20: "background-color": "#819FF7" 21: }); 22: }); 23: }).fadeIn('slow').fadeOut('slow').fadeIn('slow').fadeOut('slow').fadeIn('slow'); 24: }); 25: })

Como se puede observar es realmente sencillo, la única función que cambiar un poco es la asociada al label lblQueue, en dicho caso una vez se termine de ejecutar la cola de animaciones se realizará los especificado entre las líneas 16 – 22, lo cuál no hará más que modificar el estilo del div.

La función asociada al label lblDelay lo que hace es que después de ejecutar el efecto espera 1 segundo para ejecutar el siguiente efecto.

Espero les sea de utilidad.

Descarga del ejemplo!