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=".png" />
</div>

and my jQuery:

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

Here a jsFiddle: /

thanks a lot for helping!

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!

• javascript
• jquery
• css
• jquery-animate
• opacity

2 Answers 2

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.

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

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/

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)" });