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

Question

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

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

例如：如果红色方块向右，当单击“蓝色”时，如何使方块出现在“margin-left：0”处，然后重新启动bounce()函数？

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

Answer 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();
});

Answer 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/