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