2

I am using following code to change background color:

        $('.posts').animate({height: '100px', backgroundColor: '#0000FF'}, 2000);
        $('.posts a').animate({color: '#00FF00'}, 2000);

getting following error on firebug instead of previewing color change in page:

Expected color but found 'NaNpx'. Error in parsing value for 'background-color'. Declaration dropped.
Expected color but found '#00FF00px'. Error in parsing value for 'color'. Declaration dropped.

What's the error with my code?

KoolKabin
  • 17,157
  • 35
  • 107
  • 145
  • You need plugin read more here: http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor/2302005#2302005 – Ivan Ivanic Jun 27 '11 at 11:57

4 Answers4

3

You cannot use animate to animate colors without jQuery UI.

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

and

The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

source: http://api.jquery.com/animate/

Niklas
  • 29,752
  • 5
  • 50
  • 71
2

jQuery doesn't come with support for animating background-colour by default, but you can use the Color Plugin to do it.

Jack Franklin
  • 3,765
  • 6
  • 26
  • 34
0

You can't animate colors without the color plugin.

http://www.bitstorm.org/jquery/color-animation/

You could also use JQuery UI.

The jQuery UI effects core extends the animate function to be able to animate colors as well.

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
0

To animate colors with query you should use this:

http://plugins.jquery.com/project/color

daniel.herken
  • 1,095
  • 7
  • 19