本文介绍了我如何动画的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:
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.
您也可以使用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;
}
这篇关于我如何动画的div的背景的不透明度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!