通过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();