jquery loop animation

Question

i have these scrip that i need to loop:

$(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 the runIt(); inside it self so it can loop, it loops but my browser goes blank and i will not respond. how can i do it so it will loop that animation.

thanks in advance

Answer 1

No need to query the DOM constantly. Store the $('.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 could just run all of it with an interval timer:

$(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/