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动画从左起动后2500ms开始，那么应该应用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/

jquery使用延迟动画多个元素

2 个答案: