jQuery animate backgroundColor

The color plugin is only 4kb so much cheaper than the UI library. Of course you'll want to use a decent version of the plugin and not some buggy old thing which doesn't handle Safari and crashes when the transitions are too fast. Since a minified version isn't supplied you might like test various compressors and make your own min version. YUI gets the best compression in this case needing only 2317 bytes and since it is so small - here it is:

(function (d) {    d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {        d.fx.step[e] = function (g) {            if (!g.colorInit) {                g.start = c(g.elem, e);                g.end = b(g.end);                g.colorInit = true            }            g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"        }    });    function b(f) {        var e;        if (f && f.constructor == Array && f.length == 3) {            return f        }        if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {            return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]        }        if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {            return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]        }        if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {            return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]        }        if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {            return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]        }        if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {            return a.transparent        }        return a[d.trim(f).toLowerCase()]    }    function c(g, e) {        var f;        do {            f = d.css(g, e);            if (f != "" && f != "transparent" || d.nodeName(g, "body")) {                break            }            e = "backgroundColor"        } while (g = g.parentNode);        return b(f)    }    var a = {        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],        transparent: [255, 255, 255]    }})(jQuery);

I had the same problem and fixed it by including jQuery UI. Here is the complete script :

<!-- include Google's AJAX API loader --><script src="http://www.google.com/jsapi"></script><!-- load JQuery and UI from Google (need to use UI to animate colors) --><script type="text/javascript">google.load("jqueryui", "1.5.2");</script><script type="text/javascript">$(document).ready(function() {$('#menu ul li.item').hover(    function() {        $(this).stop().animate({backgroundColor:'#4E1402'}, 300);        }, function () {        $(this).stop().animate({backgroundColor:'#943D20'}, 100);    });});</script>

Do it with CSS3-Transitions. Support is great (all modern browsers, even IE). With Compass and SASS this is quickly done:

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

Pure CSS:

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

I've wrote an german article about this topic: http://www.solife.cc/blog/animation-farben-css3-transition.html