我如何动画的div的背景的不透明度？ [英] How can I animate the opacity of the background of a div?

问题描述

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

I have a div #test with a 0 opacity background, I want to animate it until reach the opacity of 0.7. But .animate doesn't seem to work with the css rgba.

我的css是：

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

my 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/

Here a jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/

感谢您的帮助！

推荐答案

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

First of all you need to set the property correctly

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

那么你需要包括jquery-ui来动画颜色。

then you need to include jquery-ui to animate colours.

http://jsfiddle.net/7twXW/11/

您也可以使用css转换来设置背景颜色。

You can also use css transitions to animate background colours

#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/

这篇关于我如何动画的div的背景的不透明度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！