Pause

A jQuery plugin to pause and resume animations

Pause is a jQuery plugin that makes it possible to pause and resume jQuery animations. It does so by decorating (overriding) jQuery's animate method with its own, keeping track of running animations and of their progress.

The code is loosely based on BOX's Pause-Resume-animation plugin, which unfortunately I found too buggy to be used in my own CrossSlide project, and so decided to rewrite it.

The plugin overrides jQuery's default animate() method, so that any animation started after loading my plugin becomes pauseable. Two new methods are added to every jQuery object: pause() and resume(), with no parameters. Both the new animate() and the other methods can be applied to collection of objects and to objects in an incorrect state (eg. resuming something that wasn't paused) in a robust manner.

Example

Move your mouse over the boxes:

The animation is started with regular animate() calls. The interesting code is in the hover handler:

$box.hover(function() {
  $box.pause();
}, function() {
  $box.resume();
});