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

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

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

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

Ответ 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.

Ответ 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/

Ответ 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");
});

Ответ 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
        });  
    })

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