如何在jQuery中設置背景持續時間

Question

jQuery(document).ready(function(){ 
    jQuery('div').css('background','#fff').delay(12000).css('background','#000'); 
}); 

嗨隊友..我想知道爲什麼這不起作用..我想設置我的背景的持續時間，並在特定時間後更改其顏色。

Answer 1

你可以嘗試的setTimeout

jQuery(document).ready(function(){ 
    var divs = jQuery('div').css('background','#fff') 
    setTimeout(function(){ divs.css('background','#000'); }, 12000); 
}); 

Answer 2

由於.delay()只能用jQuery的標準效果隊列或定製隊列的作品，你可能只是想用一個setTimeout()通話。

jQuery(document).ready(function(){ 
    jQuery('div').css('background','#fff') 
    setTimeout(function(){ jQuery('div').css('background','#000'); }, 12000); 
}); 

jsFiddle example（三秒超時看到更快）

Answer 3

你可以用純CSS做

http://jsfiddle.net/austinpray/Q8TVX/

body { 
    animation:color-change 5s 1; 
    -webkit-animation:color-change 5s 1; /* Safari and Chrome */ 
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
} 

@keyframes color-change 
{ 
    0% {background:#fff;} 
    90% {background:#fff;} 
    100% {background:#000;} 
} 

@-webkit-keyframes color-change /* Safari and Chrome */ 
{ 
    0% {background:#fff;} 
    90% {background:#fff;} 
    100% {background:#000;} 
} 

您可以在動畫屬性更改爲得到你想要的效果。

http://caniuse.com/#feat=css-animation

Answer 4

jQuery的延遲功能將在隊列中執行後續的功能。所以，你要排隊吧：

$('div').css('background','#fff').delay(12000).queue(function(nxt){ 
    $(this).css('background','#000'); 
    nxt(); // continue the queue 
}); 

嘗試jsfiddle demo

希望這是對你有幫助。