Yair Villar
Yair Villar

Reputation: 195

jquery loop animation

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

Upvotes: 2

Views: 15415

Answers (2)

Joseph Silber
Joseph Silber

Reputation: 220136

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/

Upvotes: 9

Tallboy
Tallboy

Reputation: 13467

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

Upvotes: 1

Related Questions