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

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

C'est mon setup actuel, mais je sens que ce n'est pas la meilleure façon de les écrire. Je ne peux pas trouver des exemples sur la façon dont vous écrivez mieux pour le chronométrage. Toute aide? Je l'apprécierais.

Je dois également ajouter que le timing de chaque élément n'est pas cohérente.

source d'informationauteur Tom

  1. 27

    fadeIn prend un rappel comme second paramètre. Que le rappel est exécutée dès que l'animation est terminée. Si vous souhaitez que les éléments à s'estomper de manière séquentielle, vous pouvez enchaîner les rappels:

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

    Cela pourrait être ré-écrite à l'aide d'un tableau de sélecteurs et une seule méthode, si vous vous êtes senti comme ça:

    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);
});

    Voir ce dernier dans l'action au JSBin.

  2. 11

    Cela peut être fait avec élégance depuis la 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/

  3. 6

    Je le ferais dans une boucle, tant que vous parlez d'un uniforme de l'incrément (et tant 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'index transmis par .each() pour incrémenter le retard.

    De sorte que vous êtes effectivement en train de faire:

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

    EDIT: l'espoir De traiter la question dans le commentaire ci-dessous, vous pouvez stocker un Tableau des délais que vous souhaitez utiliser, et d'accéder à l'index approprié du Tableau à l'aide de l'indice de .each().

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

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

    Pas heureux avec les réponses, voici ce que j'ai utilisé:

        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 n'avez pas à déclarer les retards.