[英]How can I animate the opacity of the background of a div?
I have a div #test with a 0 opacity background, I want to animate it until reach the opacity of 0.7. 我有一个带有0不透明度背景的div #test,我想要动画它直到达到0.7的不透明度。 But .animate doesn't seem to work with the css rgba. 但.animate似乎不适用于css rgba。
My css is: 我的css是:
#test {
background-color: rgba(0, 0, 0, 0);
}
my html: 我的HTML:
<div id="test">
<p>Some text</p>
<img src="http://davidrhysthomas.co.uk/img/dexter.png" />
</div>
and my jQuery: 和我的jQuery:
$('#test').animate({ background-color: rgba(0, 0, 0, 0.7) },1000);
Here a jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/ 这里有一个jsFiddle: http : //jsfiddle.net/malamine_kebe/7twXW/10/
thanks a lot for helping! 非常感谢你的帮助!
First of all you need to set the property correctly 首先,您需要正确设置属性
$('#test').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000);
then you need to include jquery-ui to animate colours. 那么你需要包含jquery-ui来动画颜色。
http://jsfiddle.net/7twXW/11/ http://jsfiddle.net/7twXW/11/
You can also use css transitions to animate background colours 您还可以使用css过渡来为背景颜色设置动画
#test {
background-color: rgba(0, 0, 0, 0);
-webkit-transition:background-color 1s;
-moz-transition:background-color 1s;
transition:background-color 1s;
}
When using animate function don't use background-color but backgroundColor instead. 使用animate函数时,请不要使用background-color而应使用backgroundColor。 So here is the working code : 所以这是工作代码:
$('#test').animate({ backgroundColor: "rgba(0,0,0,0.7)" });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.