jQuery+jquery.color.jsで背景色をアニメーション

jQueryだけでは、animeteにbackgroundColorを渡しても何も起こりません。
そこで、文字色・背景色をアニメーションで徐々に変化させたかったら、プラグインが必要です。

http://plugins.jquery.com/project/color
から、
View all releases -> jquery.color.js.txtを保存。
jquery.color.jsにリネームし、HTMLから読み込む。

で、

$button = $('div#button');
$button.stop().animate({
        backgroundColor: "#eee",
        color: "#333",
    }, 200);

とやれば、背景色がアニメーションで徐々に変わっていきます。
（<div id="button" />が表示されている前提です。）

ただ、この方法で背景色、文字色を変更した場合、CSSで

div#button:hover {
    background-color: #00f;
    color: #f00;
}

としてあってもアニメーション終了時の色がstyle属性に直接設定されるようで、
ホバー時も色が変わりません。

なので、下記のようにCSSを追加

div#button {
    background-color: #fff;
    color: #000;
}
// 終了時と同じ色
div#button.enable {
    background-color: #eee;
    color: #333;
}

と、JavaScriptも変更。

$button = $('div#button');
$button.stop().animate({
        backgroundColor: "#eee",
        color: "#333",
    }, 200
    , 'linear'
    , function() {
        $button.addClass('enable');
        $button[0].style['background-color'] = null;
        $button[0].style['color'] = null;
    });

こんな感じで、アニメーション終了後にstyle属性から、それぞれのパラメータを削除します。
そして、その代わりに'enable'のclassを追加して、終了時の状態と合わせます。
こうすることで、色の情報をCSSから読み込んでいる状態になるので、同様にCSSに記載されている:hoverが有効になるようです。