オブジェクトを複数のウェイポイント/目的地でアニメーション化しますか？

Question

ここ

は、「B」の宛先に「A」に行く線形アニメーションですhttp://jsfiddle.net/BL5cS/

ボックスは「D」などを「C」から「B」から「A」のようにアニメーション化されますので、私は別のパスを追加することができますどのように：

EXP：http://thesaurus.maths.org/mmkb/media/png/Zigzag.png

Answer 1

チェーンアニメーション：

$('.my_element').animate(...first destination...) 
       .animate(...second destination...) 
       .animate(...third destination...) 
       .animate(...fourth destination...) 

あなたはまた、それを配列内の目的地を格納し、ループができます。

var destinations = [ 
     {top:..., left:...}, 
     {top:..., left:...}, 
     {top:..., left:...}, 
     {top:..., left:...} 
    ], 
    element = $('.my_element'); 

$.each(destinations, function(i, v) { 
    element.animate(v) 
}); 

Here's your code少し修正しました。