jQuery的animate方法对颜色无法做动画效果，例如有个test元素：

<div id="test" style="border: 3px solid #CDCDCD; width: 500px; height: 500px; background-color: #FFFFFF"> 测试元素</div>

我们写一行这样的代码：

$("#test").animate({"backgroundColor":"#FF3300","height":200},5000);

我们可以看到test元素高度会缓慢的变小，而该元素的背景颜色却毫无变化，假设你去对边框做颜色变化的动画效果，也是无法实现的。

再看一下API：http://www.css88.com/jqapi/#p=animate

所有用于动画的属性必须是数字的（除了如下所示）；这些属性如果不是数字的将不能使用基本的jQuery功能。（举个例子，width, height或者left可以执行动画，但是background-color不能。）属性值被当作一个像素单位的数字,除非另有说明。单位em 和 %需要指定使用。就是说color，background-color，border-left-color等等这些颜色属性是不能执行动画效果的。

jQuery ui中Effects有一个Color Animation效果（见：http://jqueryui.com/demos/animate/）这里分明能改变文本颜色和背景颜色，看了一下jquery.effects.core.js这个源码，并且抽出源码，改了一个jQuery Color Animations颜色动画插件，对’backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’这几个属性做了动画支持。

见demo页面：http://www.css88.com/demo/Color_Animations/

更多阅读：

http://jquery.offput.ca/highlightFade/

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

建议继续学习：

1. JQuery实现Excel表格呈现    (阅读：46516)
2. 50个活力和动感的网页设计－颜色的灵感    (阅读：32883)
3. 分享一个JQUERY颜色选择插件    (阅读：12629)
4. jQuery插件---轻量级的弹出窗口wBox.    (阅读：9682)
5. colortail，让 tail 命令绚丽起来    (阅读：8755)
6. 色轮，用科学解释艺术    (阅读：8781)
7. 10个强大的Ajax jQuery文件上传程序    (阅读：7751)
8. jQuery的data()方法    (阅读：7573)
9. jQuery性能优化指南    (阅读：7303)
10. 颜色的代码表达式    (阅读：6494)