0

我做了一个乒乓球游戏的小演示。这很简单，但它不想循环。我究竟做错了什么？

$(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;}
4

1 回答 1

0

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

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

未捕获的 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/

于 2013-03-13T16:50:59.403 回答