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

See this last one in action at JSBin .