jQuery的淡入淡出的CSS背景圖像和顏色

Question

這裏是樣本：http://jsfiddle.net/Zg55k/

我怎樣才能改變CSS背景圖像和顏色平穩，淡入淡出效果。當按下背景圖像時，應該同時淡入淡出和背景色淡入。

Answer 1

你應該做2層。您想要淡入的圖層必須具有更高的Z-index（或者位於代碼中其他圖層下方）並且具有不透明度：0; 然後逐漸將不透明度更改爲1，例如使用jQuery animate。

HTML：

<div class="box1"> 
    <div class="box2"> 
    </div> 
</div> 

CSS：

.box1 { 
    background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg); 
    width: 100px; 
    height: 100px; 
} 

.box2 { 
    height: 100px; 
    width: 100px; 
    background: #000000; 
    opacity: 0; 
} 

JS：

$('.box1').click(function(){ 
    $('.box2').animate({ 
     opacity: 1 
    }); 
}); 

見的jsfiddle： http://jsfiddle.net/Mikey/9D32K/

你也可以做

<div class="box1"></div> 
<div class="box2"></div> 

但是，那麼你應該將盒子放在絕對位置。

Answer 2

您是否嘗試過對元素進行分類並使用CSS3轉換？

transition: background 0.5s linear;

當你改變的背景下，無論是與toggleClass或與您的代碼，$('#box1').css('background-color','black');由類定義它會褪色。