2

I have an animation running in 4 steps, when the 4 steps are over, I would like it to restart.

var aSteps = [
    {
        "x": "800",
        "y": "0"
    },
    {
        "x": "800",
        "y": "500"
    },
    {
        "x": "0",
        "y": "500"
    }, {
        "x": "0",
        "y": "0"
    }
];

var iStepsLength = aSteps.length;
for (var i = 0; i < iStepsLength; i++) 
{
    $('#P1').animate
    ({
        left: aSteps[i].x,
        top: aSteps[i].y,
     }, 1000);
}

I've tried to add an if statement like. 

if (i == 3)
{
    i=0;    
}

But then my browser will just crash because it runs the for loop infinitely. I hope that you can help me out, and teach me what it is that I'm doing wrong.

Improve this question
3
  • You need window.setTimeout Commented Oct 16, 2013 at 11:08
  • Use setInterval or setTimeout to call your function with periodic interval. Don't call the animate method in for loop. Commented Oct 16, 2013 at 11:11
  • Being that jquery is being used I think the callback is a tidier solution than setting up timers. Timers can be beneficial though if there are lots of objects all animated at once. Commented Oct 16, 2013 at 11:21

2 Answers 2

Reset to default
2

.animate() can take a callback which will be invoked when the animation has ended:

function animateSteps( counter ) {
    $('#P1').animate({
        left: aSteps[ counter ].x,
        top: aSteps[ counter ].y,
     }, 1000, function(){
         if (counter == 3)
         {
            counter=0;    
         }
         animateSteps( counter + 1 );
     });
}

animateSteps( 0 );
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

-1

set the for loop equal to a function. call the function, then call it again. EDIT: Like this: 

function forloop() { 
   for (var i = 0; i < iStepsLength; i++) {
     $('#P1').animate ({ left: aSteps[i].x, top: aSteps[i].y, }, 1000); 
   }
}

then you can just call the function whenever you want the loop to run like so:

forloop()

Improve this answer

9 Comments

Sounds like a recipe for disaster?! Maybe you'd like to explain that a bit clearer.
...ok so you've clarified your thinking a bit, but even so, how then do you know when to call the function without ending up in the same situation as you had originally (infinite loop)? You might as well just utilise the built in callback facility of the animate command and avoid the for loop altogether.
maybe im not understanding the question, but I figured that since the loop would run until i equaled the length of the way, it would only run 4 times. If OP wanted the loop to run again, then they could just call the loop again. No infinite loop, as far as I'm aware.
What the OP wanted was the loop to run again as soon as the last animation had finished (or even when i == 3), the problem is there is nothing to stop the loop doing that in a nanosecond. What you have done is simply put the loop into a function. The problem is knowing when to call that function ... doing it your way how do you know when you've reached the end of the first four animation steps? Where do you put the check for i == iStepsLength that won't cause it to do what it did originally (basically causing a sort of infinite loop).
You need to remember that he animate function is asynchronous so the loop doesn't wait for the animation to complete. That may be what you are missing here.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.