Question

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

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

如何在用户点击$('#box')之前每隔4秒重复播放一次此动画？

非常感谢任何帮助。谢谢:)）

基于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);
});

Answer 1

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

单击事件处理程序中的

。这是'jQueryish'方式，没有setInterval()。

Answer 2

您可以使用 setInterval ，然后将其分配给变量。当用户点击$（“＃box”）按钮时，调用 clearInterval 将变量作为参数传递。

var intervalId = setInterval(function(){/*your code*/}, 4000);

$("#box").click(function(){
    clearInterval(intervalId);
});

Answer 3

使用javascript的clearinterval或setinterval函数隐藏动态创建的元素

查看以下链接以获取更多详细信息http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Answer 4

启动计时器：

var timer = window.setInterval(yourAnimationFunction, 4000);

杀死计时器：

$('#box').click(function(){
  clearInterval(timer);
});

jQuery重复事件直到用户点击它

4 个答案: