jquery - 循环对角线动画

Question

我正试图让我的宇宙飞船沿对角线向左和向下飞行，但我无法让它重新设置以再次执行相同的循环，任何帮助都会很酷。

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

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

Answer 1

您可以使用动画中的完成函数来安排/开始下一轮动画，请不要使用带有 的字符串setTimeout()，使用实际的函数引用。

您的动画也不会循环回到它开始的地方，因此您必须修复它以使其成为一个完整的循环。如果没有，它不会回到原来的位置。我不确定这是否是有意的。

$(document).ready(function() {

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

     setTimeout(spaceship1, 400);
});