如何设置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/