Question

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

例如，我可能有一个在1秒内消失的动画，而我需要暂停400ms。它应该停留在40％的不透明度，并保持在那里，直到我恢复，此时它应该从它停止的地方继续，并花费另外600ms完成其淡入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;将立即停止所有动画。

如何暂停所有jQuery动画？

1 个答案: