備忘録。マウスオーバー時に背景の
色をアニメーションしながら変更する、
というのをクロスブラウザ対応で実装
したい。css3を使えば簡単な事ですが、
ご存知のようにIEは非対応。で、色々
探してみたんですが、jQueryUIを使う
のが一番良さそうな感じでした。

普通にググったらJquery Color Pluginというプラグインがあったのですが、動作はするけどIEでエラーが出ます。リファレンスを見ても

そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。
(jQuery日本語リファレンス)

と書いてあるし、Jquery Color Pluginを直すのも面倒だし、どうしようかなと思ったんですが、jQueryUIを使えば凄く簡単なんですね・・・素人ですみません。

コード

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
			$(document).ready(function(){
				$("対象").hover(function() {
                $(this).stop().animate({ backgroundColor: "マウスオーバー時のカラー"}, 変更速度);
                },function() {
                $(this).stop().animate({ backgroundColor: "デフォルト状態のカラー" }, 変更速度);
                });
		 }); 
</script>

Sample / ボックス

			$(document).ready(function(){
				$(".box").hover(function() {
                $(this).stop().animate({ backgroundColor: "#f46200"}, 800);
                },function() {
                $(this).stop().animate({ backgroundColor: "#ffffff" }, 800);
                });
		 }); 

demo

Sample / テキスト

$(document).ready(function(){
				$(".p").hover(function() {
                $(this).stop().animate({color: "#f46200"}, 800);
                },function() {
                $(this).stop().animate({color: "#1a1a1a" }, 800);
                });
		 }); 

demo

マウスを乗せるとテキストカラーが変化します

感想

今更ですけどjQueryUI便利だな、って思いました。これからはよく見てみることにします。

参考：[jQuery UI] animate – 色を変化させる