jQuery的延迟多个元素动画 [英] jquery animate multiple elements with delay

问题描述

我想一个接一个地用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/

解决方案

您应删除queue: false.如果您指定动画不排队，则delay()将被忽略，因为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/

I want to animate multiple elements with jQuery one after another, so

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

http://jsfiddle.net/eP2C3/1/
And now I need them to fadeOut while moving. If duration is 3000ms I add 2500ms delay and fade it out in 500ms.

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

http://jsfiddle.net/eP2C3/
But if I combine it with previous example they would animate simultaneously. And delay only opacity animation.

$("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/

解决方案

You should remove the queue: false. The delay() will be ignored if you specify the animation not to be queued because delay is a callback that is also added to the queue.

Here I've updated your jsfiddle: http://jsfiddle.net/eP2C3/10/

---

Update:

If you need opacity animation to start after 2500ms from the start left animation then queue: false should be applied to do this. However .delay(i*1000) will be ignored but a good workaround is to use setTimeout() to begin the animation:

$("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);
});

See this updated jsfiddle: http://jsfiddle.net/eP2C3/36/

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