Цепная анимация jQuery, которая влияет на разные элементы

Question

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

Это мои текущие настройки, но я чувствую, что это не лучший способ написать это. Я не могу найти примеров того, как бы вы написали это лучше для определения времени. Любая помощь? Буду признателен за это.

Я также должен добавить, что время каждого элемента не согласовано.

Answer 1

fadeIn принимает обратный вызов в качестве второго параметра.Этот обратный вызов выполняется, как только анимация завершена.Если вы хотите, чтобы элементы появлялись последовательно, вы можете связать обратные вызовы:

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

. Это можно переписать, используя массив селекторов и один метод, если вам так хочется:

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

См. Последний в действии на JSBin .

Answer 2

Это можно сделать элегантно, начиная с 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/

Answer 3

Я бы делал это в цикле, если вы говорите о последовательном приращении (и до тех пор, пока они отображаются в том же порядке на странице).

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

Пример: http://jsfiddle.net/km66t/

Используется индекс, переданный .each() для увеличения задержки.

Итак, вы эффективно делаете:

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

---

РЕДАКТИРОВАТЬ: Чтобы, надеюсь, решить проблему в комментарии ниже, вы могли бы вместо этого сохранить массив задержек, которые вы хотите использовать, и получить доступ к соответствующему индексу массива, используя индекс из .each() .

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

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

Answer 4

Не в восторге от предоставленных ответов, вот что я использовал:

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

Таким образом, вам не нужно объявлять о задержках.