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

Check out [this question](http://stackoverflow.com/questions/663568/how-do-i-animate-a-background-color-to-transparent-in-jquery) for a workaround — irishbuzz, Sep 22 '10 at 14:48

score 2 · Accepted Answer · answered Sep 22 '10 at 14:28

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

score 0 · Answer 2 · answered Sep 22 '10 at 14:25

0

You can't animate the background property.

Maybe you can use a sprite and use the BackgroundPosition Plugin

answered Sep 22 '10 at 14:25

Xaver

11,144
13
56
91

score 0 · Answer 3 · answered Sep 22 '10 at 14:35

0

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.

answered Sep 22 '10 at 14:35

Tim

5,893
3
35
64

hover() backgroundColor problem

3 Answers3