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

我有一个0不透明度背景的div#测试，我想设置它的动画，直到达到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>

这里有一个JSFIDLE：

---

非常感谢你的帮助

首先，您需要正确设置属性

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

然后您需要包括jqueryui来设置颜色动画

您还可以使用css转换来设置背景颜色的动画

#测试{
背景色：rgba（0,0,0,0）；
-webkit过渡：背景色1s；
-moz过渡：背景色1s；
过渡：背景色1s；
}

---

使用动画功能时，不要使用背景色，而是使用背景色。下面是工作代码：

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

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