looping a diagonal animation

Question

I'm trying to get my spaceship to fly left and down diagonally but I can't get it to reset to do the same loop again, any help would be cool.

 $(document).ready(function() {
    setTimeout("spaceship1()",400);
  });

 function spaceship1(){
     $("#spaceship1").animate({
           left:"-=800px", 
           top:"+=800px"
     },2000).animate({
           top:"-800px"
     },0);
     setTimeout("spaceship1()",2000); 
     }
 }

Answer 1

You can do it like this using the completion function from the animation to schedule/start the next round of animation, and please don't use strings with setTimeout(), use actual function references.

Your animation also doesn't cycle back to where it started so you will have to fix that to make it a complete loop. If not, it will not return to it's original location. I'm not sure if that is intended or not.

$(document).ready(function() {

     function spaceship1() {
         $("#spaceship1").animate({
               left:"-=800px", 
               top:"+=800px"
         },2000).animate({top:"-800px"}, 2000, function() {
             setTimeout(spaceship1, 2000);
         });
     }

     setTimeout(spaceship1, 400);
});