jQuery：如何优化/清理这个基本的动画代码？

Question

我试图制作手形动画来绘制形状，它工作正常，但代码看起来很长而且非专业。任何使这个动画简短而专业的解决方案？

这是一个例子，我的实际动画太长但有相同的想法：

$(hand).animate({ top : 30, left : 255 }, function(){
  $(hand).animate({ top : 130, left : 250 }, function(){
    $(hand).animate({ top : 140, left : 265 }, function(){
        $(an_element).fadeOut();
    });
  });
});

有什么建议吗？

Answer 1

你可以这样写：

$(hand)
    .animate({ top : 30, left : 255 })
    .animate({ top : 130, left : 250 })
    .animate({ top : 140, left : 265 }, function(){
        $(an_element).fadeOut();
    });

DEMO

---

更新

您也可以这样写：

handCoorArr = [ [30,255], [130,250], [140,265] ];

for (i=0;i<handCoorArr.length;i++)
{
    $(hand).animate({top:handCoorArr[i][0],left:handCoorArr[i][1]});
}
/* 400 is the default animation speed */
$(an_element).delay(400*handCoorArr.length).fadeOut();

DEMO

---

更新2：

动画的每一步都有特定的延迟

handCoorArr = [ [30,255,50], [130,250,800], [140,265,500] ];

for (i=0;i<handCoorArr.length;i++)
{
    $(hand).animate({top:handCoorArr[i][0],left:handCoorArr[i][1]},handCoorArr[i][2]);
}
handDelay=0;
$.each($.map(handCoorArr, function(v,i){return v[2]}),function(){handDelay+=this;});
$(an_element).delay(handDelay).fadeOut();

DEMO