Astuce animations séquentielles faciles dans jQuery

Dans cette astuce vidéo, je vais vous montrer un moyen simple d'autoriser des animations séquentielles d'un nombre infini d'éléments. A l'origine, j'ai appris cette technique à Dave Methvin, mais ne croyez pas que beaucoup de gens sont au courant de ce petit tour.

Abonnez-vous à notre chaîne YouTube pour voir tous les tutoriels vidéo!

Le but

Nous voulons filtrer un nombre infini d'éléments d'une page, en faisant correspondre un sélecteur, puis les faire disparaître.

Le HTML

 
Regarder
 
Moi
 
Disparaître
 

Le jQuery

var paras = $ ('p'), i = 0; // Si vous utilisez jQuery 1.4, vous n'avez pas besoin de faire || [] (function () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) ();

Nous commençons par "mettre en cache" tous les paragraphes de la page, enveloppés dans l'objet jQuery (var paras). Nous créons également une variable itérateur - je. Cet itérateur nous permettra de cibler chaque nouvel élément de paragraphe, sans connaître la longueur spécifique de l'élément. paras objet à l'avance.

Dans la fonction anonyme invocatrice, nous obtenons le premier paragraphe de la page avec "paras [i]"… Mais nous voulons incrémenter je par un pour chaque itération. Ainsi, la prochaine fois que la sélection sera appelée, elle fera référence au prochain élément du jeu enveloppé. Donc, nous devons être sûrs d'écrire paras [i ++]. Ensuite, il suffit d'appeler fadeout et de passer argument.callee en tant que fonction de rappel, afin de permettre la récursivité. Ce sera égal à la fonction dans laquelle il est contenu; nous disons donc essentiellement "rincez et répétez!"

alerte (arguments.callee); // alerte le suivant (function () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) ();

Remarque

Si, pour une raison quelconque, vous utilisez jQuery 1.3 ou une version antérieure, vous devez spécifier ce qui doit se produire lorsque paras [i] est égal à un élément qui n'existe pas. Dans les anciennes versions de jQuery, une erreur «non définie» était renvoyée. Pour compenser, nous passons $ (paras [i ++] || []) pour spécifier que, si l'élément n'existe pas, nous enveloppons un tableau vide pour éviter les erreurs.

Notez que, à partir de jQuery 1.4, cela n’est plus nécessaire, jQuery retournant à la place l’objet jQuery..

• Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..