jquery - jQuery重复事件，直到用户单击它

我在部分隐藏的div容器上有一个动画，当ajax查询返回的结果为true时将执行该动画。 （动画实际上只是将框放大，然后再次滑回）

$('#box').animate({'right':'-184px'}, 300, 'easeOutBounce');
$('#box').animate({'right':'-194px'}, 150, 'easeOutExpo');

如何使动画每4秒重复一次，直到用户单击$('#box')为止？

任何帮助是极大的赞赏。谢谢 ：）

基于jAndy和rahul的代码。这就是我正在考虑的实现方式（虚拟设置）。

这是启动动画的代码：

// declares the variable first or $('#stop').click() will return undefined variable
var intervalId = '';
$('#submit').submit(function () {
  var intervalId = setInterval(function(){
    $('#box').animate({'right':'-184px'}, 300, 'easeOutBounce');
    $('#box').animate({'right':'-194px'}, 150, 'easeOutExpo');
  }, 4000);
});

这是应该会停止动画的代码：

$('#stop').click(function () {
  clearInterval(intervalId);
});

最佳答案

function anibox(){
   $('#box').delay(4000).animate({'right':'-184px'}, {duration: 300, easing: 'easeOutBounce'});
   $('#box').animate({'right':'-194px'}, {duration: 150, easing: 'easeOutExpo', complete: anibox});
}

要开始播放动画，只需调用

anibox()

要在代码中的任何位置停止它，请使用：

$('box').stop();

在您的点击事件处理程序中。
那就是没有setInterval()的“ jQueryish”方式。

关于jquery - jQuery重复事件，直到用户单击它，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2635213/