如何暂停所有 jQuery 动画？

Question

在某些情况下，我需要暂停页面上的所有动画以进行一些用户交互，然后在用户响应后立即恢复所有动画。

例如，我可能有一个动画在 1 秒内淡入淡出，我需要在 400 毫秒内暂停它。它应该在 40% 的不透明度处停止，并一直停留在那里，直到我恢复，此时它应该从停止的地方继续并花费另外 600 毫秒完成从 40% 到 100% 的淡入。

页面上可能同时有多个动画，我想暂停它们。此外，一些动画可能在完成后有更多的动画排队继续，这一切都需要工作：当我恢复时，当前动画需要完成，然后队列中的下一个动画需要开始，就像什么都没发生一样.

jQuery 似乎没有任何对暂停动画的内置支持；我能找到的最接近的是.stop()，它将在动画中的当前位置停止，但稍后无法恢复；它要么立即移动到队列中的下一个动画，要么完全清除动画队列。

如何暂停动画，以便稍后恢复？

Answer 1

暂停/恢复选项

pause plugin 适用于这种情况。

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)
    });
}​

这里是a working fiddle to demonstrate。

蛮力选项

当然不是你要找的，而是相关的。

设置jQuery.fx.off = true; 将立即停止所有动画。