Jquery 演示将不会循环

我做了一个乒乓球游戏的小演示。它非常简单，但不想循环。 我做错了什么

$(document).ready(function(){
move1();

function move1() {
    $('.pong.links').animate({ 'top': $('.pong_frame').position().top+20 }, 1200, "swing");
    $('.pong.rechts').animate({ 'top': $('.pong_frame').position().top+20 }, 1200, "swing");
    //$('.ball').animate({left: '+=150', top: '+=130'}, 600, "linear").animate({left: '+=110', top: '-=95'}, 600, "linear");
    $('.ball').animate({ 'top': $('.pong_frame').position().top+135, 'left': $('.pong_frame').position().left+180 }, 1200, "linear")
        .animate({ 'top': $('.pong_frame').position().top+30, 'left': $('.pong_frame').position().left+415 }, 1200, "linear");
    move2();
};
function move2() {
    $('.pong.links').animate({ 'top': $('.pong_frame').position().top+80 }, 500, "swing").delay(300)
                    .animate({ 'top': $('.pong_frame').position().top+20 }, 500, "swing");
    $('.pong.rechts').animate({ 'top': $('.pong_frame').position().top+20 }, 500, "swing").delay(700)
                    .animate({ 'top': $('.pong_frame').position().top+60 }, 500, "swing");
    $('.ball').animate({ 'top': $('.pong_frame').position().top+0, 'left': $('.pong_frame').position().left+280 }, 500, "linear")
        .animate({ 'top': $('.pong_frame').position().top+30, 'left': $('.pong_frame').position().left+0}, 1200, "linear");
    //$('.ball').animate({left: '-=90', top: '-=35'}, 600, "linear").animate({left: '-=170', top: '+=35'}, 1000, "linear");
    move3();
};
function move3() {
    $('.pong.links').animate({ 'top': $('.pong_frame').position().top+40 }, 500, "swing").delay(800)
                    .animate({ 'top': $('.pong_frame').position().top+20 }, 500, "swing");
    $('.pong.rechts').animate({ 'top': $('.pong_frame').position().top+40 }, 500, "swing").delay(300)
                     .animate({ 'top': $('.pong_frame').position().top+80 }, 500, "swing");
    $('.ball').animate({ 'top': $('.pong_frame').position().top+0, 'left': $('.pong_frame').position().left+50 }, 500, "linear")
              .animate({ 'top': $('.pong_frame').position().top+135, 'left': $('.pong_frame').position().left+280}, 1200, "linear")
              .animate({ 'top': $('.pong_frame').position().top+100, 'left': $('.pong_frame').position().left+415}, 1200, "linear");
    move4();
};
function move4() {
    $('.pong.links').animate({ 'top': $('.pong_frame').position().top+100 }, 500, "swing").delay(300)
                    .animate({ 'top': $('.pong_frame').position().top+0 }, 500, "swing");
    $('.pong.rechts').animate({ 'top': $('.pong_frame').position().top+40 }, 500, "swing").delay(300)
                     .animate({ 'top': $('.pong_frame').position().top+80 }, 500, "swing");
    $('.ball').animate({ 'top': $('.pong_frame').position().top+0, 'left': $('.pong_frame').position().left+0 }, 1500, "linear");
    move1();
};  

});

---

html:

---

---

---

如果执行一个函数并在完成时调用另一个函数。。。最后，再次呼叫第一个

是的，您正在创建一个循环，但有一个大问题：

未捕获范围错误：超过最大调用堆栈大小 这就是为什么你的动画不会重复。。。因为你的记忆溢出了

（如果有..则不建议使用Max call stack警告）

---

如果要在函数之间运行循环，我建议使用setInterval（）和setTimeout（）方法

首先：

var timeToLoop = '8600'; // set in how many miliseconds the animation will repeat
var inter=setInterval(move1,timeToLoop); // time to wait to start looping
move1(); // Start

然后，在每个函数中减去最后一个。。。加：

var t=setTimeout(function(){move2()},2400); // After 2.4 seconds, I will execute the next function

---

工作示例：

在这里工作可能会打折我的答案！看起来它确实有效，可能是得到了错误的棍子末端，这很酷，顺便说一句…作为一个提示，而不是查询顶部位置并添加20或任何东西，只要使用

.animate（{'top'：'+=20'}）我忘了提到，您必须调整函数之间的时间。。。我只是放了一些。祝你好运
var timeToLoop = '8600'; // set in how many miliseconds the animation will repeat
var inter=setInterval(move1,timeToLoop); // time to wait to start looping
move1(); // Start

var t=setTimeout(function(){move2()},2400); // After 2.4 seconds, I will execute the next function