使用 jquery/javascript 停止带有动画的函数答案

【问题标题】：stopping a function with animations in it with jquery/javascript使用 jquery/javascript 停止带有动画的函数
【发布时间】：2011-11-23 01:52:39
【问题描述】：

我正在为一个网站构建一个自定义的定时图像滑块，并且我坚持一个基本原则。我有一个从页面加载开始的递归函数。我想知道如何立即停止该功能，然后在开始时通过点击重新启动它。

在下面的 jsfiddle 示例中，有人可以告诉我如何让红色方块从边距 0 开始，然后在单击“蓝色”或“绿色”按钮时再次启动bounce() 函数？

例如：如果红色方块向右，当单击“蓝色”时，我怎样才能使方块出现在“margin-left：0”处，然后让bounce（）函数再次启动？

非常感谢。 http://jsfiddle.net/hZ6xZ/7/

【问题讨论】：

标签： jquery function jquery-animate stoppropagation

【解决方案1】：

小提琴 - http://jsfiddle.net/mrtsherman/hZ6xZ/9/

使用 jQuery 的 stop() 来终止当前动画。还要看看方法链，它比多次调用 $('#box') 更有效。

$('#blue').click(function(){
    repeat = clearTimeout(repeat);
    $('.box')
        .stop()
        .css({'background-color':'blue'})
        .css({'margin-left':'0'});

    bounce();
});

【讨论】：

【解决方案2】：

很简单，jQuery 有一个叫 stop() 的函数来停止动画，它还支持跳转到动画结尾和清除队列。

像这样形成你的反弹函数：

var repeat;

function bounce(){
     $('.box')
         .stop()
         .css({'margin-left':'0px'})
         .animate({'margin-left':'100px'})
         .animate({'margin-left':'0px'});

     repeat = setTimeout(function() { bounce(); }, 2000);
}

更多关于停止的信息：http://api.jquery.com/stop/

【讨论】：