jQueryを使用して異なる間隔でCSS背景画像を変更する

Question

jQueryを使用してdivの背景を画像間で異なる遅延で変更しようとしています。これまでのところ私はこれ持っている：

うまく動作しますが、私が本当にしたいことはこれです

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

：

• オリジナル背景
• 遅延
• 背景2
• 短い遅延
• 背景3
• 遅延

これらの手順をループします。私はそれを行うさまざまな方法を見てきましたが、常に1セットの間隔がありました。キューの中にもっと多くのアイテムを入れようとしているところでコードを使って遊んでいましたが、うまく動作することはありません。

Answer 1

これが最適な解決策であるかどうかはわかりません。あなたはそれをアニメーション化したい場合は、単にあなたの体-CSSに以下を追加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

を見てみましょう。

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