我怎样才能动画一个div的背景的透明度？(How can I animate the opacity

我有一个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:

当使用动画功能不使用的背景颜色，但替代的backgroundColor。 因此，这里的工作代码：

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

文章来源: How can I animate the opacity of the background of a div?