animation séquentielle jQuery

Puisque la queue est par élément , rien n’est en fait ici, c’est pourquoi ils s’animent tous en même temps. Il y a cependant plusieurs façons de le faire. Un moyen simple de faire cela avec un petit nombre d’articles est avec .delay() , comme ceci:

 $('#bar').animate( {width: '100%'}, {duration: 500, specialEasing: {width: 'linear'}, complete: function() { $('li').each(function(i) { $(this).delay(i*200).animate( {top:'0px'}, {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'}, }); }); } }); 

Vous pouvez tester une démo ici .

Cela retarde l’animation 200ms * l’index de l’élément dans l’itération .each() , de sorte que les premières animations sont instantanées, les secondes 200ms plus tard, les 200ms suivantes, etc. Il ne faut pas utiliser 200 ms pour le délai, vous pouvez utiliser un nombre plus petit et laisser les animations se chevaucher un peu, ce qui semble être l’effet recherché.

Une autre façon de faire cela (plus détaillé, séquentiel uniquement, et ne permet aucun chevauchement) consiste à utiliser .queue() pour construire le vôtre, par exemple:

 $('#bar').animate( {width: '100%'}, {duration: 500, specialEasing: {width: 'linear'}, complete: function() { $('li').each(function() { $(document).queue(function(n) { $(this).animate( {top:'0px'}, {queue: true, duration: 200, specialEasing: {top: 'easeOutBack'}, complete: n //call the next item in the queue }); }); }); } }); 

Vous pouvez tester cette version ici .

La queue est unique pour chaque élément, ce qui signifie que chaque élément a sa propre queue indépendante. Utilisez un rappel une fois l’animation terminée pour chaque élément. Exemple: Si vous avez cinq balises li, utilisez une classe particulière pour les quatre premières et ajoutez un rappel à l’animation de cette classe pour exécuter l’animation de l’élément suivant.

Voici ce que j’ai utilisé pour l’animation séquentielle:

 for (var i = 1; i < 10; i++) { $('#bullet-' + i).delay(i * 1000 - 1000).fadeIn('fast', function () { var id = this setTimeout (function () {$(id).css('color', 'lightgray');}, 1500); }); }