链接影响不同元素的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");
});