Consejo rápido Animaciones secuenciales fáciles en jQuery

En este consejo rápido de video, demostraré una manera fácil de permitir animaciones secuenciales de un número infinito de elementos. Originalmente aprendí esta técnica de Dave Methvin, pero no creo que muchas personas estén conscientes de este pequeño truco..



Suscríbete a nuestro canal de YouTube para ver todos los videos tutoriales.!

La meta

Queremos filtrar a través de un número infinito de elementos en una página, haciendo coincidir algún selector, y luego hacer que se desvanezcan secuencialmente.

El HTML

 

Reloj

Yo

Desaparecer

La jQuery

var paras = $ ('p'), i = 0; // Si usa jQuery 1.4, no necesita hacer || []. (function () $ (paras [i ++] || []). fadeOut ('slow', argumentos.callee);) ();

Comenzamos por "almacenar en caché" todos los párrafos de la página, envueltos en el objeto jQuery (var paras). También creamos una variable iteradora. - yo. Este iterador nos permitirá apuntar a cada nuevo elemento de párrafo, sin conocer la longitud específica del paras objetar antes de tiempo.

Dentro de la función anónima de invocación automática, obtenemos el primer párrafo de la página con "paras [i]" ... Pero queremos incrementar yo por uno para cada iteración. De esta manera, la próxima vez que se llame a la selección, se hará referencia al siguiente elemento en el conjunto envuelto. Por lo tanto, debemos estar seguros de escribir paras [i ++]. Entonces, es una simple cuestión de llamar a fadeout y pasar argumentos. Se llama la función de devolución de llamada para permitir la recursión. Esto será igual a la función en la que está contenido; así que esencialmente estamos diciendo "enjuague y repita!"

alerta (argument.callee); // alerta sobre lo siguiente (function () $ (paras [i ++] || []). fadeOut ('slow', argumentos.callee);) ();

Nota

Si, por algún motivo, está utilizando jQuery 1.3 o una versión anterior, debe especificar qué debe ocurrir cuando paras [i] es igual a un elemento que no existe. En versiones anteriores de jQuery, devuelve un error, "indefinido". Para compensar, pasamos $ (paras [i ++] || []) para especificar que, si el elemento no existe, envolvemos una matriz vacía para evitar cualquier error.

Cabe señalar que, a partir de jQuery 1.4, esto no es necesario, ya que jQuery devolverá el objeto jQuery en su lugar.

  • Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..