Question

我的页面上有3个div，我试图使用jquery .animate width函数展示扩展。问题是我不希望它们同时扩展，但我也不希望它们只在它之前完成时才开始。我有点需要他们在前一次开始后几毫秒开始所以只是稍微不同步，如果这是有意义的吗？

Answer 1

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

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

Answer 2

您可以指定不将动画排队为以下选项之一：

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

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

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

Answer 3

DEMO link

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

<小时/> 编辑：

DEMO

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

整整几行。

在我第一次回答后 Q 编辑 1h 后，上述情况为'-1'，这是不可思议的。
没关系。在几行中这是你的脚本。
顺便说一下上面这么好解释，任何人都可以在fiew秒内修复它以获得最佳效果。方法是关键。谢谢！ ;）

Answer 4

您可以使用简单的计时器延迟它们：

// Start animation 1

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

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

Answer 5

使用each()宽度delay()：

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

这将在开始上一个动画后200ms开始下一个动画。

修正了缺失的论点。

多个jquery动画

5 个答案:

DEMO link

DEMO