Interrupting a sequence of animations with user interaction

Question

I have sequence of animations that if the user doesn't interrupt should complete till the end. The animations are implemented using delays. For example

$element1.delay(1000).animate({left: 1000}, 5000);
$element2.delay(2000).animate({left: 1000}, 5000);
$element3.delay(3000).animate({left: 1000}, 5000);
$element4.delay(4000).animate({left: 1000}, 5000);

The reason I'm doing it like this is because this seem intuitive to me as each animation is completely independent from the timing of the others.

Suppose I wish to interrupt the animation at the 2500ms mark and once interrupted, the elements must jump to the end of their animation state. Now, I tried using the .stop(false, true) function on a .find(:animated) selection. $element1 and $element2 are indeed interrupted and jump to the end state, but since $element3 and $element4 are still in their .delay phase, they are not affected.

What would be the best and simplest way to achieve the effect I want? Thanks

Answer 1

I think you're looking for a recently introduced finish() method. If you set stop() 's jumpToEnd argument to true, it will only affect the currently processed item in queue. But if you call finish() , it will jump to the end result of the whole queue.

Fiddle: http://jsfiddle.net/SnTgS/

Finish() was introduced in jQuery 1.9, but had some bugs later fixed in 1.10.1, so you might want to use that version and newer.

http://api.jquery.com/finish/

In earlier versions of jQuery I suppose you could loop through the queue length and call stop(false, true) on each item in queue.