多个jQuery动画

Question

我在页面上有三个div，我正在尝试使用jQuery .animate宽度函数给它们一个扩展的外观。问题是我不希望它们同时扩展，但我也不希望它们仅在前面的一个完成后才开始。我需要它们在前一个开始几毫秒后开始，这样它们就略微不同步，如果这有意义的话？

- Hellodan

Answer 1

在使用animate()之前，尝试使用.delay()：

$('#mydiv').delay(200).animate

示例： http://jsfiddle.net/yF8Vx/

- Canuteson

---

忘记延迟吧。这可能是最好的方法。 - Richard Dalton

Answer 2

您可以在选项中指定不将动画排队：

$('div').animate({"width": 100});

然后，您可以在单独的window.setTimeout调用中运行此代码以分散效果。

示例 - http://jsfiddle.net/6Dqus/1/

- Richard Dalton

---

我认为您不需要禁用排队，因为效果作用于不同的元素。仅超时应该就足够了。仍然+1，因为您花时间创建了一个jsFiddle。 - njr101

你是对的。假设那是有意义的。更新了答案，没有禁用队列。 - Richard Dalton

嗨，Rich，我试图使用你的方法，但当我将宽度设置为0像素并扩展它时，图层似乎会在我的网站上重叠，我在jsfiddle上进行了测试，当你给每个div一个“＃”和它们的正确名称，即#div1 #div2 #div3时，它也会出现相同的问题。 - Hellodan

@RichardD，能否对每行文本而非div执行此类效果？就像这个视频中所示：http://iliketoplay.dk/#/blog/deff - Hellodan

Answer 3

演示链接

$('.box').each(function(i){                          // 'i' = index
   var spd = 700;                                    // set speed (animation/delay) time
   var dly = spd*i;                                  // 700*0 = 0 ; 700*1 = 700 .....
   $(this).delay(dly).animate({width: 500 },spd);    // now you have proper delays.
});

---

编辑：

演示

$('.box').each(function(i){   
   var dly = 400*i;                                   // delay time is less than...
   $(this).delay(dly).animate({width: 200},800);     // the animation time
});

并在几行中完成整个过程。

令人难以置信的是，在我第一次回答后1小时进行Q编辑后，上述内容变成了“-1”。
不要紧，在这里用几行代码就可以了。
顺便说一句，上面的解释非常好，任何人都可以在几秒钟内修复它以获得最佳结果。 方法 是关键。谢谢！;)

- Roko C. Buljan

---

他说他不想让动画一个接一个地发生，而是同时发生。如果你要抱怨别人的代码，至少确保你自己的代码是正确的！ - Richard Dalton

哈哈，说实话 roXon，我的意思是我不希望动画同时发生，也不希望等待前一个动画完成后再开始每个动画 :P - Hellodan

Answer 4

你可以使用一个简单的计时器来延迟它们：

// Start animation 1

setTimeout(function {
  // Start animation 2
}, 100);

setTimeout(function {
  // Start animation 3
}, 200);

- njr101

---

不，我非常确定这个代码可以解决问题并回答了OP的问题。如果它不能工作，请随意更正。由于只有2个div需要延迟，使用each()似乎有些过度 - 这种方法消除了对元素顺序的依赖，并且可以非常容易地调整时间而不必费力地进行公式计算。根据@Canuteson的答案，我会使用delay()而不是setTimeout()，因为它更短。我完全忘记了delay()。 - njr101

Answer 5

使用each()和delay()函数：

$("divs").each(function(index){
    $("this").delay(index*200).animate({"width":100},500)
})

这将在上一个动画开始后的200毫秒启动下一个动画。

修复了缺少的参数。

- Litek