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

我有一个带有0不透明度背景的div #test，我想要动画它直到达到0.7的不透明度。 但.animate似乎不适用于css rgba。

我的css是：

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

我的HTML：

 
 
Some text
   

和我的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

使用动画function时，请不要使用background-color而应使用backgroundColor。 所以这是工作代码：

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