JQUERY: how to pause/start animation?

I have a jquery animation which contains about 300x functions as this one playing one after the other as a sequence:

$(".block").animate({"left": "+=50px"}, "slow");

1) How is it possible, by clicking on an anchor , to pause the whole thing and start it from where it was paused when clicking again (and not from the beginning)?

2) On another hand, say I have these for instance:

$(".block").animate({"left": "+=50px"}, "slow");
$(".block").animate({"right": "+=50px"}, "slow");
$(".block").animate({"top": "+=50px"}, "slow");...(x100)

How can I make th开发者_如何学Pythonem play one after the other without putting them as callbacks (I generate them via PHP and it would be kind of hard to generate them as callbacks of one another since there are more than 300 in total)?

---

To answer 2), you can chain them like this:

a = $(".block");
a = a.animate({"left": "+=50px"}, "slow");
a = a.animate(...)
etc...

example: http://jsfiddle.net/NwXMT/3/

---

To answer first question.

$('#anchorTagId').click(function(){
    // Caching the current position of the animated element.
    var currentLeft = $('.block').css('left');
    // Then stop the animation on that element.
    $('.block').stop();
    // Setting anchor's tag to start
});

Then on its next click

$('#anchorTagId').click(function(){
    if ($(this).hasClass('start') {
        // Starting the animation from the cached position;
        return;
    }
    // Code to stop the animation. 
});