如何循环jquery div动画?

我正在尝试使用无限循环实现一个jQuery函数来动画div。 我无法弄明白该怎么做。 这是我的代码:

$(document).ready(function() { $('#divers').animate({'margin-top':'90px'},6000).animate({'margin-top':'40px'},6000); }); 

将执行完整动画的代码放入函数中,然后将该函数作为回调参数传递给最后一个动画。 就像是…

 $(document).ready(function() { function animateDivers() { $('#divers').animate({'margin-top':'90px'},6000).animate({'margin-top':'40px'},6000, animateDivers); } animateDivers(); }); 
 $(document).ready(function() { function ani() { $('#divers').animate({ 'margin-top':'90px' },6000).animate({ 'margin-top':'40px' },6000, ani); //call the function again in the callback }); }); ani(); }); 

使用.animate()回调来“调用”你的函数:

jsBin演示

 $(function() { function loop(){ $('#divers') .animate({marginTop:90},6000) .animate({marginTop:40},6000, loop); // callback } loop(); // call this wherever you want }); 

使用setInterval是要走的路。 太多的递归只会让你“Stack Overflow”:-)“Uncaught RangeError:超出最大调用堆栈大小”

animate()函数有一个选项,可以在动画结束时调用函数。 你可以做同样的电话,瞧。

您还可以设置set interval函数,指定在什么时间间隔调用哪个方法

 $(function () { setInterval(fnName, 6000); });