jquery循环动画

我有这些我需要循环的脚本：

$(document).ready(function() { runIt(); }) function resets() { $('.grower').removeAttr("style"); } function runIt() { $('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets); } 

但是当我添加runIt（）; 在它内部，所以它可以循环，它循环但我的浏览器变得空白，我不会回应。 我该怎么做才能循环播放动画。

提前致谢

Answer 1

无需不断查询DOM。 将$('.grower')在变量中：

 $(document).ready(function() { var $grower = $('.grower'); function runIt() { $grower.animate({ width: "30px", height: '30px', left: "-6", top: "-6", opacity:"0" }, 800, function() { $grower.removeAttr("style"); runIt(); }); } runIt(); }); 

这是小提琴： http ： //jsfiddle.net/jC8Js/

---

更新：如果您希望在每个周期之前暂停，请使用计时器 ：

 setTimeout(runIt, 1000); 

这是小提琴： http ： //jsfiddle.net/jC8Js/1/

---

或者，您可以使用间隔计时器运行所有它：

 $(document).ready(function() { var $grower = $('.grower'); setInterval(function() { $grower.animate({ width: "30px", height: '30px', left: "-6", top: "-6", opacity:"0" }, 800, function() { $grower.removeAttr("style"); }); }, 1500); });​ 

这是小提琴： http ： //jsfiddle.net/jC8Js/2/

Answer 2

http://jsfiddle.net/nUVbb/

  $(document).ready(function() { runIt(); }) function resets() { $('.grower').removeAttr("style"); runIt(); } function runIt() { $('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets); }