無法更改在Jquery的CSS

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 
}

bubble1與top: 0px;
bubble2開始開始與top: 200px;
bubble3與top: 400px;
bubble4-6開始開始於top: 600px;
都是position: absolute在包裝div

代碼轉儲道歉。我的問題都是圍繞着16行：無法更改在Jquery的CSS

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

是看似永遠不會執行這個代碼，還有在我的控制檯沒有錯誤，我已經驗證了泡沫[bubbleFirst]使用的console.log返回正確的元素。（這是一個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'); 
}

我不知道爲什麼，這是行不通的，它可能是我的一個邏輯上的錯誤。但我無法爲我的生活找到它。任何幫助，將不勝感激。謝謝你的時間。

來源

2013-03-04 gaynorvader

你有什麼錯誤嗎？哪一行代碼正在執行？ – Halcyon 2013-03-04 17:14:50

所有行都正在執行，如果我運行resetBubbles函數，代碼將按照我的要求工作，但當元素數量需要增加時，它無效。第16行是未按需要運行的行。 – gaynorvader 2013-03-04 17:16:39

問題是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-04 17:54:33 gaynorvader

是否有可能調用動畫與您自定義設置頂級屬性衝突？即。你設置它，但是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-04 17:19:12 Halcyon

謝謝，這讓我接觸到解決方案。 – gaynorvader 2013-03-04 18:16:19

無法更改在Jquery的CSS

回答

相關問題