Question

I’m going to have cases where I need to pause all the animations on the page in order to do some user interaction, and then resume all the animations as soon as the user has responded.

For example, I might have an animation that’s fading in over a 1s period, and 400ms in I need to pause it. It should stop at 40% opacity, and stay there until I resume, at which point it should pick up where it left off and spend another 600ms completing its fade-in from 40% to 100%.

There might be multiple animations on the page simultaneously, and I want to pause them all. Additionally, some animations might have further animations queued to continue after they complete, and that all needs to work: when I resume, the current animation needs to finish, and then the next one in the queue needs to start, just as if nothing happened.

jQuery doesn’t seem to have any built-in support for pausing animations; the closest I can find is .stop(), which will stop at the current spot in the animation, but can’t resume later; and it either moves on to the next animation in the queue immediately, or clears the animation queue entirely.

How can I pause the animations in a way that will let me resume them later?

Answer 1

Pause / Resume Option

The pause plugin will work well for this situation.

HTML

<div class=demo>
    <div id="box1" class="animationToPause"></div>
    <div id="box2" class="animationToPause"></div>
    <div id="box3" class="animationToPause"></div>
</div>
<input id="btnPause" type="button" value="Pause Animations" />

CSS

div.demo {
    border: 1px solid #555;
    margin: 1em auto;
    width: 550px;
}
#box1, #box2, #box3 {
    width: 100px;
    height: 100px;
    position: relative;
}
#box1 {
    background: #0C0;
}
#box2 {
    background: #090;
}
#box3 {
    background: #060;
}​

​JavaScript

$(function() {
    //Begin animation on boxes
    $("div[id^='box']").each(function() {
        phase1($(this));
    });

    //Setup animation pause/resume on hover
    $("div[id^='box']").hover(function() {
        $(this).pause();
    }, function() {
        $(this).resume();
    });
});

//Toggle animation pause/resume on button click
$("#btnPause").toggle(
    function() {
        $(".animationToPause").pause();
    }, function() {
        $(".animationToPause").resume()
});

//Animation 1
function phase1($this) {
    $this.animate({
        left: 450
    }, 2000, 'swing', function() {
        phase2($this)
    });
}

//Animation 2
function phase2($this) {
    $this.animate({
        left: 0
    }, 2000, 'swing', function() {
        phase1($this)
    });
}​

Here’s a working fiddle to demonstrate.

Brute Force Option

Certainly not what you’re looking for, but related.

Setting jQuery.fx.off = true; will stop all animations immediately.