影响不同元素的链接 jQuery 动画 [英] Chaining jQuery animations that affect different elements

问题描述

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

这是我当前的设置，但我觉得这不是编写此内容的最佳方式.我找不到任何关于如何更好地编写时间的示例.有什么帮助吗?我很感激.

This is my current setup but I feel like this isn't the best way to write this. I can't find any examples on how you would write this better for timing. Any help? I'd appreciate it.

我还应该补充一点，每个元素的时间安排不一致.

I should also add that the timing of each element isn't consistent.

推荐答案

fadeIn 将回调作为第二个参数.该回调在动画完成后立即执行.如果您希望元素按顺序淡入，您可以链接回调:

fadeIn takes a callback as its second parameter. That callback is executed as soon as the animation is complete. If you want the elements to fade in sequentially, you could chain the callbacks:

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

如果您愿意，可以使用一组选择器和一个方法来重写:

This could be re-written using an array of selectors and a single method, if you felt like it:

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 上查看最后一个操作.

这篇关于影响不同元素的链接 jQuery 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！