Confusion about the Animate function in jQuery

Question

Suppose I have a box in my page:

   <div id="test" style="width:200px; height:200px; background:yellow">
        this is a test
    </div>

I just include "jquery-1.6.2.min.js" in my page

then I want change the font size, so I use

$('#test').animate({ fontSize: "10em"}, "slow");

then I want change the background-color of the "test" box I write:

$('#test').animate({ 'background-color': '#000000' }, "slow");

but until I include "jquery-ui-1.8.5.custom.min.js" it doesn't work.

I think the orginal "jquery-1.6.2.min.js" file already include the all animate function, fontsize and background color are both css attributes,but the original could only support fontsize change? Why?

My question is that I think the package "jquery-ui-1.8.5.custom.min.js" is just used for UI or some other things. Both for css attribute changing.

Answer 1

Read the jQuery docs for .animate:

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

Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

If you want to animate properties like background-color you will have to use jQuery UI (or some other plugin) as you have already noticed. Note that the jQuery UI site provides a customised download feature, so if you don't want to include all the widgets, you can select just the core library.

Answer 2

jQuery doesn't natively support animation of colours. jQuery UI does. There used to be a separate colour plugin, but that seems to have been absorbed into UI now.

Edit: Here's the original plugin though, you may be able to get it working without UI: http://plugins.jquery.com/files/jquery.color.js.txt