Ejemplo de ejecución de efectos en la cola predeterminada de jQuery

Vamos lanzar varios efectos sobre una capa y veremos como ellos mismos se ejecutan en el orden como los hemos invocado. 

Tendremos un elemento DIV, como este:

<div id="micapa">Esta capa que se va a animar, en un bucle infinito...</div>

Ahora podemos ver una función que realiza la invocación a varios efectos jQuery:

function colaEfectos(){

capa = $("#micapa");

capa.animate({

"font-size": "1.5em"

}, 2000);

capa.hide(1000);

capa.show(1000);

capa.animate({

"left": "350px",

"top": "50px"

},1500);

capa.animate({

"font-size": "0.75em"

}, 2000);

capa.animate({

"left": "100px",

"top": "20px"

}, 1500, colaEfectos);

}

Habría que fijarse que la última de las funciones de efecto invocadas hace una llamada a esta misma función, por medio de un callback, por lo que, cuando terminen de ejecutarse todos los efectos, se volverá a invocar a la función y se producirá así un bucle infinito, donde se repetirá todo el tiempo la misma secuencia de efectos.

Y ahora podemos poner en marcha esta función cuando la página esté lista:

$(document).ready(function(){

colaEfectos();

});

El resultado del ejercicio completo se puede ver en una página aparte.

Con esto hemos hecho nuestro primer ejemplo de cola de efectos. Ha sido fácil, no? Pero claro que a partir de aquí la cosa se puede complicar todo lo que deseemos, o necesitemos. En el próximo artículo empezaremos a explicar el modos existentes en jQuery para alterar las colas de efectos, para hacer cosas como detenerlas, analizarlas, cargar funciones de otros tipos para ejecutar en la cola, etc.