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

Question

これは、「A」から「B」の宛先に移動する線形アニメーションですhttp://jsfiddle.net/BL5cS/

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

経験値: 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)
});

これがあなたのコードを少し作り直したものです。