在没有jQueryUI的情况下使用动画效果更改背景颜色:

selector.css({
    backgroundColor: "#555",
    transition: "background-color 1.8s"
});

你可以使用2个div:

你可以在上面放一个复制品，然后在把复制品淡入的同时把原来的淡出。

当淡出完成后，用新的bg恢复原始。

$(function(){
    var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset();

      // Create clone w other bg and position it on original
    $elie.toggleClass("class1, class2").appendTo("body")
         .offset({top: os.top, left: os.left}).hide();

    $mytd.mouseover(function() {            
          // Fade original
        $mytd.fadeOut(3000, function() {
            $mytd.toggleClass("class1, class2").show();
            $elie.toggleClass("class1, class2").hide();            
        });
          // Show clone at same time
        $elie.fadeIn(3000);
    });
});​

jsFiddle例子

.toggleClass（） .offset（） .fadeIn（） .淡出（）

这些天jQuery颜色插件支持以下命名颜色:

aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]

我喜欢使用delay()来完成这个任务，这里有一个例子:

jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);

这可以由函数调用，“element”是元素类/名称/等。元素将立即以#FCFCD8背景出现，稍等片刻，然后淡出为#EFEAEA。

如果有人发现了这个。你最好使用jQuery UI版本，因为它可以在所有浏览器上运行。颜色插件在Safari和Chrome浏览器中存在问题。只是有时候有用。

使用CSS3-Transitions。支持很棒(所有现代浏览器，甚至IE)。使用Compass和SASS可以很快完成:

#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}

纯CSS:

#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {background:yellow}

我写了一篇关于这个主题的德语文章:http://www.solife.cc/blog/animation-farben-css3-transition.html