javascript - 如何暂停所有 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;将立即停止所有动画。