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

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).