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

考虑拥有以下对象：

<div id="d1"><span>This is div1</span></div>
<div id="d2"><span>This is div2</span></div>
<div id="d3"><span>This is div3</span></div>
<div id="d4"><span>This is div4</span></div>
<div id="clickhere"><span>Start animation</span></div>

当触发事件

click

时，此脚本片段将导致四个div的同步转换

我想要什么 然而，我想有第一个div移动第一，然后我想有第二个div移动时，第一个div的动画已达到50%。第三节和最后一节也一样

我怎样才能到达这里？谢谢你

比如：

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

---

确实要在单击

\clickhere

元素时调用strart_anim（）函数吗？您传递的不是函数，而是它的返回值。@Hiddle:对不起，您是对的，我只是输入错了：P

var duration = 1000;

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