Question

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?

Answer 1

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/