How do I animate a background color to transparent in jQuery?

Question

I can animate from transparent to color, but when I tell jquery to animate the backgroundColor: \'transparent\' it just changes to white. Any idea how to fix this?

Answer 1

You have to chain it.

For example, you can't do this:

$('#panel').animate({'backgroundColor' : 'rgba(255,255,0,0.7', 'opacity': 1}, 3000);

or even

$('#panel').animate({'background-color' : 'yellow', 'opacity': 1}, 3000);

but you can do this:

$('#panel').css('background-color', 'rgba(255,255,0,0.7)').animate({'opacity': 1}, 3000);