使用jquery/javascript停止包含动画的函数

我正在为一个站点构建一个定制的定时图像滑块，我坚持一个基本原则。我有一个从pageload开始的递归函数。我想知道如何立即停止该功能，然后重新启动它在一开始与onclick

在下面的JSFIDLE示例中，是否有人能告诉我，当单击“蓝色”或“绿色”按钮时，如何使红色正方形从边距0开始，然后再次启动bounce（）函数

例如： 如果红色方块向右，当单击“蓝色”时，如何使方块显示在“左边距：0”处，然后重新启动bounce（）函数

非常感谢

小提琴-

使用jQuery的stop（）终止当前动画。还要研究方法链接，它比多次调用$（'#box'）更有效

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

    bounce();
});

---

这很简单，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);
}

有关停止的更多详细信息：