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: 最大呼び出しスタック サイズを超えました

アニメーションが繰り返されないのはそのためです...メモリがオーバーフローしているためです。

（もしそうなら..最大コールスタック警告でそれを行うことはお勧めしません）

関数間でループを実行する場合は、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 に答える