jQuery: how to optimize/clean this basic animation code?

Question

I'm trying to make hand animation to draw shape, it works fine, but the code looks long and non-professional. any solutions to make this animation short and professional?

here's an example, my actual animation is too long but has same idea:

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

any suggestions?

Answer 1

You can write it as this:

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

DEMO

---

Update:

You can write it like this as well:

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

---

Update 2:

With specific delay for each step of the animation

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