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