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

Joseph Silber · Accepted Answer · 2013-10-18 12:34:15Z

9

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/

edited Oct 18, 2013 at 12:34

answered Aug 1, 2012 at 17:15

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joseph Silber Over a year ago

@YairVillar - I added some code to pause it after it loops each time.

kuonirat Over a year ago

This: function runIt() { ... runIt(); } can cause stack overflow, because there is no stop condition. It won't show up until many "iterations", but I run into an issue with a similar approach when using jquery transition() (instead on animate()) on IE9, which does not support css transitions. The sub-call was immediate, the stack run out fast. I think this recurrent approach is not exactly how this loop should be done.

Joseph Silber Over a year ago

@kuonirat - In that case, use setInterval, as shown in the 2nd example. Though once we get tail call optimization I don't think this will be a problem.

Tallboy · Accepted Answer · 2012-08-01 17:11:03Z

1

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

answered Aug 1, 2012 at 17:11

Tallboy

13.5k13 gold badges96 silver badges193 bronze badges

2 Comments

Yair Villar Over a year ago

how can i give it time after it loops each time??

Tallboy Over a year ago

add .delay(500) before .animate()

Collectives™ on Stack Overflow

jquery loop animation

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related