1 
var bubble = [$('#bubble1'), $('#bubble2'), $('#bubble3'), $('#bubble4'), $('#bubble5'), $('#bubble6')];
var bubbleFirst = 0;
var visibleBubbles = 3;
var bubbleHeight = 200;
var bubbleTimeDelay = 5000;

var bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay/2);

function animateBubbles(){
    clearTimeout(bubbleTimer);//stop from looping before this is finished

    for(var i = 0; i < visibleBubbles + 1; i++){
        count = i + bubbleFirst;
        if ( count >= bubble.length ) count = count - bubble.length;//keep index inside array
        bubble[count].animate({top:'-=' + bubbleHeight}, 2000);
    }
    bubble[bubbleFirst].css('top', '600px');//put elements moving off top to bottom
    //resetBubbles();
    bubbleFirst++;
    if(bubbleFirst >= bubble.length) bubbleFirst = 0;//bubbles have looped
    bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay);//start looping again
}
  • バブル1はで始まりますtop: 0px;
  • バブル2はで始まりますtop: 200px;
  • バブル3はで始まりますtop: 400px;
  • バブル4-6で始まるtop: 600px;
  • すべてがposition: absoluteラッパーdivにあります

コード ダンプについてお詫び申し上げます。私の問題はすべて16行目に集中しています：

bubble[bubbleFirst].css('top', '600px');

このコードは実行されないようです。コンソールにエラーはありません。console.log を使用して、bubble[bubbleFirst] が正しい要素を返していることを確認しました。(divです)

現在、回避策を使用していますが、動的ではありません。

function resetBubbles(){
    /*bubble[bubbleFirst].css('top', '600px');//put elements moving off top to bottom*/
    if(bubble[0].css('top') == '-200px') bubble[0].css('top', '600px');
    if(bubble[1].css('top') == '-200px') bubble[1].css('top', '600px');
    if(bubble[2].css('top') == '-200px') bubble[2].css('top', '600px');
    if(bubble[3].css('top') == '-200px') bubble[3].css('top', '600px');
    if(bubble[4].css('top') == '-200px') bubble[4].css('top', '600px');
    if(bubble[5].css('top') == '-200px') bubble[5].css('top', '600px');
}

これが機能しない理由はわかりません。おそらく、私の側の論理エラーです。しかし、私は一生それを見つけることができません。どんな助けでも大歓迎です。御時間ありがとうございます。

4

2 に答える 2

1

アニメーションの呼び出しが、topプロパティのカスタム設定と競合する可能性はありますか？すなわち。設定しますが、topすぐに再び変更されanimateます。animateアニメーションが終了したときに実行されるコールバックを渡すことができます。そのとき、バブルの位置をリセットする必要があります。

function animate_bubble(index) {
    bubble[index].animate({ top: "0px" }, 2000 /* 2 seconds */, function () {
        bubble[index].css({ top: "600px" });
        animate_bubble(index);
    }
}
animate_bubble(0);
animate_bubble(1);
// etc .. probably do this in a for-loop

ただし、アニメーションをキャンセルする方法を見つける必要がありますが、それほど難しくはありません。

于 2013-03-04T17:19:12.257 に答える
0

問題はbubbleFirst、アニメーションが終了する前にインクリメントされたことです。関数を次のように変更しました。

function animateBubbles(){
    clearTimeout(bubbleTimer);//stop from looping before this is finished

    for(var i = 0; i < visibleBubbles + 1; i++){
        count = i + bubbleFirst;
        if ( count >= bubble.length ) count = count - bubble.length;//keep index inside array
        if (count == bubbleFirst) 
        {
            bubble[count].animate({top:'-=' + bubbleHeight, opacity: 0}, bubbleAnimationSpeed, function(){
                bubble[bubbleFirst].css('top', displayHeight+'px');
                bubble[bubbleFirst].css('opacity', '1'); 
            });
        }
        else if(i == visibleBubbles)
        {
            bubble[count].animate({top:'-=' + bubbleHeight}, bubbleAnimationSpeed, function(){
                bubbleFirst++;
                if(bubbleFirst >= bubble.length) bubbleFirst = 0;//bubbles have looped
                bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay);/*start looping again*/
            });
        }
        else bubble[count].animate({top:'-=' + bubbleHeight}, bubbleAnimationSpeed);
    }       
}

ご意見ありがとうございます。

于 2013-03-04T17:54:33.533 に答える