在jQuery中停止递归动画

Question

我有一个递归动画,使屏幕上的文字改变颜色.当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/

单击"停止"按钮不会执行任何操作,动画将继续.

Answer 1

看看.stop的第一个参数

.stop([clearQueue] [,jumpToEnd])

clearQueue一个布尔值,指示是否也删除排队的动画.默认为false.

所以:

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

应该管用.

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