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

Posted 2023-05-08

【中文标题】使用 jquery/javascript 停止带有动画的函数

【英文标题】：stopping a function with animations in it with jquery/javascript

【发布时间】：2011-11-23 01:52:39

【问题描述】：

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

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

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

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

【参考方案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/