在 jQuery 中停止递归动画

Posted 2023-05-08

【中文标题】在 jQuery 中停止递归动画

【英文标题】：Stop Recursive Animation in jQuery

【发布时间】：2012-05-07 08:07:08

【问题描述】：

我有一个递归动画来使屏幕上的文本改变颜色。当 div 失去可见性时，我想要一些机制来停止这个动画。在我的实际站点中，这是在一个对话框中。我想在对话框关闭时停止所有动画。我尝试使用$.stop()，但我认为这不会在递归调用期间中断调用堆栈。

这是我正在做的事情的要点：

javascript：

function rainbow() 
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $('#rainbow ul li').animate(
        color: hue
    , 500, rainbow);

$(function() 
    rainbow();

    $("#stop").click(function() 

        $('#rainbow ul li').stop()

    );
);​

html

<div id="rainbow">
    <ul>
        <li>Apple</li>
        <li>Microsoft</li>
        <li>SUN</li>
    </ul>
</div>
<button id="stop" type="reset">Stop</button>

​

http://jsfiddle.net/cRar7/12/

点击停止按钮不做任何事情，动画继续。

【问题讨论】：

不要只是发布链接.. 还要提供代码以防第三方网站出现故障！

【参考方案1】：

看看.stop的第一个参数

.stop( [clearQueue] [, jumpToEnd] )

clearQueue 一个布尔值，表示 是否也删除排队的动画。默认为 false。

所以：

$('#rainbow ul li').stop(true);

应该可以。

http://jsfiddle.net/cRar7/14/

【讨论】：

嗯，我在发布之前尝试了$('#rainbow ul li').stop(true,true);，但没有成功，但是如果我使用你发布的内容，它就可以了。 jumpToEnd 参数在处理递归时必须搞砸。我想既然没有“终点”，那就有办法去。

【参考方案2】：

好吧，你可以用一个标志来做这个把戏：

var shouldStop = false;
function rainbow() 
    if(shouldStop) return;
    // rest of animation code here


$("#stop").click(function() 
    shouldStop = true;
    $('#rainbow ul li').stop();
);

这是演示：http://jsfiddle.net/cRar7/13/

【参考方案3】：

如果你设置一个间隔而不是设置动画自递归，那没问题。 将您的脚本更改为：

function rainbow() 
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $('#rainbow ul li').animate(
        color: hue
    , 500);

$(function() 
    var ani=setInterval(rainbow,500);

    $("#stop").click(function() 

        clearInterval(ani);

    );
);