通過jQuery以不同的間隔更改CSS背景圖像

Question

我想通過jQuery與圖像之間的不同延遲更改div的背景。到目前爲止，我有這樣的：

$(document).ready(function() { 
    $("#Top").delay(10000).queue(function(){ 
     $(this).css({"background-image":"url(img/Top_Green.jpg)"}); 
    }); 
}); 

這工作得很好，但我真的希望是這樣的：

• 原始背景
• 延遲
• 背景2
• 短暫的延遲
• 背景3
• 延遲

然後循環這些步驟。我看到了不同的方式來做到這一點，但總是有一個設定的時間間隔。我一直在玩代碼，試圖把更多的東西放在隊列中，但我從來沒有得到它的工作。

Answer 1

我不確定這是否是最佳解決方案。看看http://jsfiddle.net/h4KL7/1/

var rotate = function() { 
    $("#Top") 
    .delay(1000).queue(function() { 
     $(this).css({ 
      "background-color": "red" 
     }); 
     $(this).dequeue(); 
    }) 
    .delay(3000).queue(function() { 
     $(this).css({ 
      "background-color": "green" 
     }); 
     $(this).dequeue(); 
    }) 
    .delay(500).queue(function(next) { 
     $(this).css({ 
      "background-color": "blue" 
     }); 
     $(this).dequeue(); 
     next(); 
    }) 
    .queue(rotate); 
}; 

rotate(); 

Answer 2

如果你想製作動畫，只需將它添加到您的身體的CSS。

-webkit-transition: 3s; 
-moz-transition: 3s; 
-ms-transition: 3s; 
-o-transition: 3s; 
transition: 3s;