如何在jQuery中创建链式延迟动画序列？

考虑具有以下对象：

This is div1
 
This is div2
 
This is div3
 
This is div4
 
Start animation 

并且考虑到我想使用jQuery在前面列出的四个元素中的每一个上应用动画。

我现在有什么

如果页面如下，请考虑头部中应用的以下代码：

 function start_anim() { $("#d1").animate({top:"-50px"},1000,function(){}); // Animating div1 $("#d2").animate({top:"-50px"},1000,function(){}); // Animating div2 $("#d3").animate({top:"-50px"},1000,function(){}); // Animating div3 $("#d4").animate({top:"-50px"},1000,function(){}); // Animating div4 } $(document).ready($('#clickhere').click(start_anim)); 

当触发事件click时，此脚本片段将导致四个div的同步转换。

我想拥有什么

但是我想先让第一个div移动，然后当第一个div的动画达到50％时，我希望第二个div移动。 第三个和最后一个div相同。

我怎么能达到这个目的？ 谢谢

Answer 1

就像是：

 $("#d1").animate({top:-50}, 1000); $("#d2").delay(500).animate({top:-50}, 1000); $("#d3").delay(1000).animate({top:-50}, 1000); $("#d4").delay(1500).animate({top:-50}, 1000); 

甚至更好：

 var duration = 1000; $('#d1,#d2,#d3,#d4').each(function(i) { $(this).delay( i*(duration/2) ).animate({top:-50}, duration); });