Reset and jquery loop animation

Question

I am animating some HTML objects to look like snowflakes falling, but I have some problems in the loop.

Here is my code:

//animation function function snowflakeAnimate(index) { //random numbers //time var nTime = randomRange(9000,35000); var randTime = Math.round(nTime); //delay var nDelay = randomRange(200,35000); var randDelay = Math.round(nDelay); $(this).delay(randDelay).animate({ marginTop: "+600px" }, randTime); }; $(".tweet").each(snowflakeAnimate); 

Thus, all he does now is revitalize the snowflakes, increasing the top edge to 600. The delay and animation speed is set by creating a random number. My question is: how do I reset the snowflake on top and then run the animation again so that it never stops falling.

Answer 1

I think the jQuery animate () step callback function is your friend here.

Answer 2

Here's how I did it - just needed to get the syntax for the function calling itself ...

  function snowflakeAnimate(sfAnimate) { //Animation $(sfAnimate).addClass("moving").delay(randDelay).animate({ marginTop: 600 }, 20000, function() { $(sfAnimate).animate({ marginTop: -150 }, 0, function() { snowflakeAnimate(sfAnimate); }); }); } 

So this is ... endless loop animation. If you want to see it in action, you can check it at traxmas.realadventure.co.uk