Changing background of a div using jquery

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?

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/

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

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.

To animate colors with query you should use this:

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