Chaînage d'animations jQuery affectant différents éléments

Question

$(document).ready(function() { 
    $("#div1").fadeIn("slow"); 
    $("#div2").delay(500).fadeIn("slow"); 
    $("#div3").delay(2000).fadeIn("slow"); 
    $("#div4").delay(8000).fadeIn("slow"); 
}); 

Ceci est ma configuration actuelle, mais je pense que ce n'est pas la meilleure façon d'écrire ceci. Je ne trouve pas d'exemples sur la façon dont vous écrivez ceci mieux pour le moment. De l'aide? J'apprécierais.

Je devrais également ajouter que la synchronisation de chaque élément n'est pas cohérente.

Answer 1

fadeIn prend un rappel comme deuxième paramètre. Ce rappel est exécuté dès que l'animation est terminée. Si vous voulez que les éléments se fanent en séquence, vous pouvez enchaîner les callbacks:

$(document).ready(function() { 
    $("#div1").fadeIn("slow", function(){ 
     $("#div2").fadeIn("slow", function(){ 
      $("#div3").fadeIn("slow", function(){ 
       $("#div4").fadeIn("slow"); 
      }); 
     }); 
    }); 
}); 

Cela pourrait être réécrite en utilisant un tableau de sélecteurs et une seule méthode, si vous en avez envie:

var chain = function(toAnimate, ix){ 
    if(toAnimate[ix]){ 
     $(toAnimate[ix]).fadeIn('slow', function(){ chain(toAnimate, ix + 1)}); 
    } 
}; 

$(document).ready(function(){ 
    chain(['#div1', '#div2', '#div3', '#div4'], 0); 
}); 

See this last one in action at JSBin.

Answer 2

Je le ferais en boucle, aussi longtemps que vous parlez d'un incrément cohérent (et aussi longtemps qu'ils apparaissent dans le même ordre sur la page).

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(idx * 1000).fadeIn("slow"); 
}); 

Exemple:http://jsfiddle.net/km66t/

Il utilise l'indice passé par .each() pour incrémenter le retard.

Vous êtes effectivement faire:

$("#div1").delay(0).fadeIn("slow"); 
$("#div2").delay(1000).fadeIn("slow"); 
$("#div3").delay(2000).fadeIn("slow"); 
$("#div4").delay(3000).fadeIn("slow"); 

---

EDIT: Pour répondre, espérons la question dans le commentaire ci-dessous, vous pouvez stocker un tableau à la place des retards que vous souhaitez utiliser, et accéder à l'index approprié du tableau en utilisant l'index de .each().

var delays = [0, 1000, 2000, 4000]; 

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(delays[ idx ]).fadeIn("slow"); 
}); 

Answer 3

pas satisfait des réponses fournies, voici ce que je faisais:

var $steps = $('#div1, #div2, #div3'); 
    // iterate throught all of them 
    $.each($steps,function(index,value){ 
     $stage.fadeIn('slow', function(){ 
      // You can even do something after the an animation step is completed placing your code here. 
      // run the function again using a little introspection provided by javascript 
      arguments.callee 
     }); 
    }) 

De cette façon, vous ne devez pas déclarer les retards.

Answer 4

Cela peut être fait avec élégance depuis 1.8:

$("div").toArray().map(function(e){ 
    return function(){ 
     return $(e).fadeIn(600).promise() 
    }; 
}).reduce(function(cur, next){ 
    return cur.then(next); 
}, $().promise()); 

http://jsfiddle.net/f3WzR/