How can I animate the opacity of the background of a div?
21,187
Solution 1
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.
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;
}
Solution 2
When using animate function don't use background-color but backgroundColor instead. So here is the working code :
$('#test').animate({ backgroundColor: "rgba(0,0,0,0.7)" });
Author by
Gradislava Bikkulova
Updated on July 15, 2022Comments
-
Gradislava Bikkulova almost 2 years
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.
My css is:
#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>
and my jQuery:
$('#test').animate({ background-color: rgba(0, 0, 0, 0.7) },1000);
Here a jsFiddle: http://jsfiddle.net/malamine_kebe/7twXW/10/
thanks a lot for helping!