如何設置div背景的不透明度？

Question

我有一個帶有0不透明度背景的div #test，我想要動畫它直到達到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

使用animate函數時，請不要使用background-color而應使用backgroundColor。 所以這是工作代碼：

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