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が有効になるようです。