Jquery animate quand une autre animation est en cours

J’utilise une animation d’ accélération simple donnée ici à l’aide de JQUERY EASING PLUGIN
Soulever un div de gauche: 200 à gauche: 0 et retour (dernier exemple de la page ci-dessus)

J’ai plusieurs divs dans un conteneur div.et ce que je veux faire, c’est animer les 4 divs de la manière suivante:

1] Supposons que si j’ai deux divs, div1 et div2. lorsque div1 est animée et que l’ animation est en cours, l’animation div2 doit commencer.eg: lorsque div1 se déplace de gauche = 200 à gauche = 0, l’animation div2 doit commencer lorsque div1 est à gauche = 100.

Edit (Note: le nombre de divs est variable)

…….

Lorsque l’animation en cours est en cours et atteint un point, l’animation suivante doit commencer (l’effet de l’animation est identique pour toutes les div).

2] Tout en itérant une collection div et en animant, retardez l’animation suivante pour un intervalle de temps donné.

Existe-t-il un moyen de connaître le début de l’animation? ou l’animation est en cours?

Merci a tous

Vous pouvez utiliser le pseudo-sélecteur ‘: animated’ pour savoir si un élément est actuellement en mouvement:

if ($('#div1').is(':animated')) { // do something }

http://api.jquery.com/animated-selector/

Vous pouvez également essayer l’option step pour vérifier quand div2 doit commencer à animer:

 $('#div1').animate({ left:0 },{ step: function() { // check distance and animate div2 when it reaches 100 } });

http://api.jquery.com/animate/

La réponse que vous recherchez se trouve dans le paramètre “step”.

Vous pouvez définir un paramètre d’étape appelé de manière cohérente sur l’ensemble de l’animation. À chaque étape, vous pouvez vérifier la progression de l’animation et si celle-ci a atteint le seuil, vous pouvez déclencher la deuxième animation.

Par exemple:

 $item1 = $("#myItem1"); $item2 = $("#myItem2"); $item1.animate({width: 500}, { duration: 1000, step: function(now, fx) { if (fx.state > 0.5 && fx.prop === "width") { if(!$item2.is(':animated')) // Make sure you didn't start the animation already $item2.animate({width: 500}, 1000); } } })

Cette idée fonctionnera pour n’importe quel nombre de divs, bien que vous deviez bien évidemment reprendre le concept et le modifier pour qu’il corresponde à votre cas. S’il vous plaît laissez-moi savoir si cela aide!

En savoir plus sur la fonction step ici: http://api.jquery.com/animate/

Vous pouvez utiliser une fonction pour gérer l’animation à un endroit.

 setTimeout(doAnimate($div1),100);setTimeout(doAnimate($div2),200);

etc.

Vous pouvez append un rappel à la fonction animate:

 $('#div1').animate( { left: 0 }, { duration: 'slow', easing: 'easeOutBack' }, function(){ //Do what you want in here, it will be executed once the animation above is completed. )};