javascript - How can I pause all jQuery animations? - Stack Overflow

admin管理员组

文章数量:1304184

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 pleting 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 plete, 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?

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 pleting 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 plete, 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?

• javascript
• jquery
• jquery-animate

Share Improve this question Follow edited Aug 31, 2017 at 17:09 James Hill 61.9k2222 gold badges149149 silver badges166166 bronze badges asked Mar 8, 2012 at 14:11 Joe WhiteJoe White 97.8k6464 gold badges225225 silver badges335335 bronze badges 1

• Never tried it but maybe this is working: archive.plugins.jquery./project/Pause-Resume-animation – m90 Commented Mar 8, 2012 at 14:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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.

本文标签： javascriptHow can I pause all jQuery animationsStack Overflow