Javascript 如何暂停所有jQuery动画？

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

例如，我可能有一个动画在1s内淡入，400毫秒后我需要暂停它。它应该停止在40%的不透明度，并保持在那里，直到我恢复，在这一点上，它应该拿起它停止的地方，并花费另外600毫秒完成它的淡入从40%到100%

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

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

---

我如何暂停动画，以便以后继续播放？

暂停/恢复选项

在这种情况下，这种方法很有效

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" />

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

给你

暴力选项

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

---

设置将立即停止所有动画。

通过该更新，我终于可以投票支持您的答案。谢谢分享。@JimmyX，哈哈。我觉得“最终”这个词可能有点太强了。我在第一次之后大约30秒添加了额外的选项：p这个插件在放松功能方面没有完全正确（当你恢复时，它会在开始时重新启动放松，因此如果你有类似的情况，那么你会在恢复后再次获得初始反弹）。但它确实掌握了正确的时间，保持了队列的完整性，这是最重要的部分；我认为我可以忍受的放松。谢谢从未尝试过，但也许这是有效的：

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