jquery 延迟动画多个元素

Question

我想用jQuery一个接一个地为多个元素制作动画，所以

$("div").each(function(i){
    $(this).delay(i*1000).animate({left: "+=200"}, {duration: 3000});
});

http://jsfiddle.net/eP2C3/1/
现在我需要它们在移动时淡出。如果持续时间为 3000 毫秒，我添加 2500 毫秒延迟并在 500 毫秒内淡出。

$("div").each(function(i){
    $(this).animate({left: "+=200"}, {duration: 3000, queue: false})
            .delay(2500)
            .animate({opacity: 0}, {duration: 500});
});

http://jsfiddle.net/eP2C3/
但是，如果我将它与前面的示例结合起来，它们会同时进行动画处理。并且只延迟不透明动画。

$("div").each(function(i){
    $(this).delay(i*1000).animate({left: "+=200"}, {duration: 3000, queue: false})
            .delay(2500)
            .animate({opacity: 0}, {duration: 500});
});

http://jsfiddle.net/eP2C3/2/

Answer 1

您应该删除queue: false。如果您指定动画不排队，delay() 将被忽略，因为延迟是一个回调，也会添加到队列中。

我在这里更新了你的 jsfiddle：http://jsfiddle.net/eP2C3/10/

---

更新：

如果您需要opacity 动画在左动画开始后 2500 毫秒后开始，则应应用 queue: false 来执行此操作。不过.delay(i*1000) 将被忽略，但一个好的解决方法是使用setTimeout() 开始动画：

$("div").each(function(i){
    var div = $(this);
    setTimeout(function(){
    div.animate({left: "+=200"}, {duration: 3000, queue: false})
            .delay(2500).animate({opacity: 0}, {duration: 500});
    },i*1000);
});

查看更新后的 jsfiddle：http://jsfiddle.net/eP2C3/36/

Answer 2

好的，问题比我想象的要复杂一些，但我想我现在有了答案。不幸的是，您不能使用 jQuery animate 函数，因为它正在排队您的动画，并且您不能同时应用两个具有不同设置的动画（至少据我所知）。 所以你可以尝试这样的事情：

$('div').each(function (i) {
    var $this = $(this);
    $this.delay(i * 1000).animate(
        {
            left: '+=200'
        },
        {
            duration: 3000,
            start: function () {
                setTimeout(function () {
                    setInterval(function () {
                        $this.css({opacity: '-=0.04'});
                    }, 30);
                }, 2500);
            }
        }
    );
});

setInterval 函数用于创建动画效果。我希望这有帮助。 JSFiddle：http://jsfiddle.net/eP2C3/44/