Jquery loop animation

Question

I have these scripts that I need to loop around:

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

but when i add runIt (); inside of it, so that it can loop, it loops, but my browser is empty and I will not respond. how can i do this so that it loops through this animation.

early

Answer 1

No need to constantly query the DOM. Save $('.grower') in a variable:

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

Here's the fiddle: http://jsfiddle.net/jC8Js/

---

Update:. If you want it to pause before each cycle, use a timer :

 setTimeout(runIt, 1000); 

Here's the fiddle: http://jsfiddle.net/jC8Js/1/

---

Alternatively, you can simply start all of this with a timer interval :

 $(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); });​ 

Here's the fiddle: 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); }