如何暂停所有 jQuery 动画？

Posted 2023-05-08

【中文标题】如何暂停所有 jQuery 动画？

【英文标题】：How can I pause all jQuery animations?

【发布时间】：2012-03-26 00:15:51

【问题描述】：

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

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

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

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

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

【问题讨论】：

从未尝试过，但也许这行得通：archive.plugins.jquery.com/project/Pause-Resume-animation

【参考方案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; 将立即停止所有动画。

【讨论】：

有了这个更新，我终于可以投票给你的答案了。感谢分享。

@JimmyX，哈哈。我认为finally这个词可能有点太强了。我在第一个 :P

后大约 30 秒添加了附加选项

这个插件在缓动功能方面并不完全正确（它在你恢复时重新开始缓动，所以如果你有类似easeInBack的东西，那么你会得到恢复后再次初始反弹）。但它确实可以正确地安排时间并保持队列完整，这是重要的部分；我认为我可以忍受的宽松。谢谢！