Question

here is the linear animation that goes to ‘A’ to ‘B’ destination http://jsfiddle.net/BL5cS/

How can I add another path so box will animate like ‘A’ to ‘B’ to ‘C’ to ‘D’ etc:

exp: http://thesaurus.maths.org/mmkb/media/png/Zigzag.png

Answer 1

Chain the animations:

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

You could also store the destinations in an Array, and loop it.

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 reworked a bit.