How can I animate the opacity of a background div?

Question

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

My 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> 

and my jQuery:

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

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

Thank you for help!

Answer 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 enable jquery-ui to animate the colors.

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

You can also use css transitions to animate background colors

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

Answer 2

When using the animation function, use background-color instead, except for backgroundColor instead. So here is the working code:

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