通过多个航点/目的地为对象设置动画？

Question

这是从'A'到'B'目的地http://jsfiddle.net/BL5cS/

的线性动画

如何添加另一条路径，以便框格像'A'到'B'到'C'到'D'等动画：

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重做了一点。