Question

我做了一个乒乓球比赛的小演示。这很简单，但不想循环。我做错了什么？

$(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：

 < div class="pong_frame">

 < div class="pong links"></div>

 < div class="pong rechts"></div>

< div class="ball"></div>

 < /div>

的CSS：

body, .pong_frame{padding:0;margin:0;}

.pong_frame{width:450px; height:150px; border:solid 1px #999; position:relative; overflow:hidden;}

.pong{width:8px; height:50px; background:#9cd1aa; position:absolute;}

.pong.links{left:0px; top:0px;}

.pong.rechts{right:0px; top:130px;}

.ball{width:15px; height:15px; background:#9cd1aa; border-radius:15px; margin-left:10px;  margin-right:10px; position:absolute; top:0px;}

Answer 1

如果您执行某个功能并在完成时再拨打另一个...并且最后再次拨打第一个...

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

未捕获RangeError：超出最大调用堆栈大小

这就是为什么你的动画不会重复...因为内存溢出。

（如果确实如此..我不建议使用Max调用堆栈警告）

如果你想在函数之间运行循环，我建议使用 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

工作示例：http://jsfiddle.net/tnTmE/1/

演示不会循环

1 个答案:

未捕获RangeError：超出最大调用堆栈大小