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

See this last one in action at 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");

编辑：为了解决下面评论中的问题，您可以改为存储要使用的延迟数组，并使用{{{{{{ 1}}。

.each()

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

这样您就不必申报延迟了。

链接影响不同元素的jQuery动画

4 个答案: