通过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

我不确定这是否是最佳解决方案。看看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

如果您想为其设置动画，只需将其添加到body-css。

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