如何循环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); });