如何为 div 背景的不透明度设置动画？答案

【问题标题】：How can I animate the opacity of the background of a div?如何为 div 背景的不透明度设置动画？
【发布时间】：2013-04-21 17:16:57
【问题描述】：

我有一个不透明度为 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/

非常感谢您的帮助！

【问题讨论】：

标签： javascript jquery css jquery-animate opacity

【解决方案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/

【讨论】：

【解决方案2】：

使用动画功能时，不要使用背景颜色，而是使用背景颜色。所以这是工作代码：

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

【讨论】：