hover() backgroundColor problem

Question

$('li > a').hover(
  function(){
   $(this).animate({
    backgroundColor: '#2a639a',
    color: '#fff'
   },300).corner('5px');
  },
  function(){
   $(this).animate({
    background: 'transparent',
    color: '#444'
   },300);
  }
 );

What's wrong with background: 'transparent'? turns back white, not transparent

Answer 1

You can't animate the background property.

Maybe you can use a sprite and use the BackgroundPosition Plugin

Answer 2

Important thing to note: Transparent in CSS is different from 0% Opacity.

Opacity can be graduated, whereas tranparent is either on or off. Therefore you cannot animate transparent to or from a solid colour and expect a smooth transition. If you try, most browsers will treat it as either black or white for the purposes for the animation, which I think is what you're seeing here.

Animating the opacity instead may give you a smoother transition, though of course it is different (for starters it affects the whole element, not just the background, plus there are browser compatibility issues to consider).

Answer 3

It's impossible to animate the background-color only with jQuery. jQuery only supports numeric values as stated in the jQuery-API You can use jQuery UI to animate the background-color.