如何爲div背景的不透明度設置動畫效果？

Question

我有一個div #test的背景爲0不透明度，我想爲它設置動畫直到達到0.7的不透明度。但是.animate似乎不適用於css rgba。

我的CSS是：

#test { 
    background-color: rgba(0, 0, 0, 0); 
} 

我的html：

<div id="test"> 
    <p>Some text</p> 
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" /> 
</div> 

和我的jQuery：

$('#test').animate({ background-color: rgba(0, 0, 0, 0.7) },1000); 

這裏一個的jsfiddle：http://jsfiddle.net/malamine_kebe/7twXW/10/

感謝了很多幫助！所有的

Answer 1

首先，您需要設置該屬性正確

$('#test').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000); 

，那麼你需要包括jQuery的UI動畫的顏色。

http://jsfiddle.net/7twXW/11/

您還可以使用CSS過渡動畫背景顏色

#test { 
    background-color: rgba(0, 0, 0, 0); 
    -webkit-transition:background-color 1s; 
    -moz-transition:background-color 1s; 
    transition:background-color 1s; 
} 

http://jsfiddle.net/7twXW/13/

Answer 2

當使用動畫功能不使用的背景顏色，但替代的backgroundColor。所以這裏是工作代碼：

$('#test').animate({ backgroundColor: "rgba(0,0,0,0.7)" });