如何使用fadeIn/Out更改div背景色？

Question

如何用淡入/淡出來改變div背景顏色，我只想淡出背景顏色，而不是背景圖片，請給我一些有用的代碼或解決方案

Answer 1

您不能淡入淡出背景顏色）使用jQuery的fadeIn/fadeOut。

你可以做的是放置一個額外的圖層（DIV等）與你的背景顏色和淡入/淡出。

，而不是像這樣：

<div id="my-background"></div> 

使用此結構：

<div id="container"> 
    <div id="my-background"></div> 
</div> 

CSS

#container 
{ 
position:relative; 
width:200px; 
height:100px; 
background-image:url(my-background-image.jpg); 
} 
#my-background 
{ 
height:100%; 
width:100%; 
background-color:blue; 
position:absolute; 
z-index:99; 
} 

然後使用jQuery的淡入/淡出方法

JS

jQuery("#my-background").fadeOut(); 

Answer 2

<script> 
$(document).ready(function(){ 
    $("p").toggle(function(){ 
    $("body").css("background-color","green");}, 
    function(){ 
    $("body").css("background-color","red");}, 
    function(){ 
    $("body").css("background-color","yellow");} 
); 
}); 
</script> 

試試吧..這應該正常工作

Answer 3

雖然only supported by modern browsers您也可以考慮使用CSS transitions來達到同樣的效果

HTML

<div class='foobar'></div> 

CSS

.foobar { 
    /* transition properties */ 
    transition: background-color 2s; 
    -moz-transition: background-color 2s; 
    -webkit-transition: background-color 2s; 
    -o-transition: background-color 2s; 

    /* basic styling & initial background-color */ 
    background-color:maroon; 
    width:100px; 
    height:100px; 
} 

/* Change background color on mouse over */ 
.foobar:hover { 
    background-color:blue; 
} 

工作示例這裏，http://jsfiddle.net/eRW57/14/

Answer 4

有了這個，你可以淡出所有的div id爲＃我的背景

var $div = $('#my-background'); 
    $div.each(function blank(){ 
    $(this).animate({'backgroundColor': '#fff'},2000); 
});