備忘録。マウスオーバー時に背景の
色をアニメーションしながら変更する、
というのをクロスブラウザ対応で実装
したい。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便利だな、って思いました。これからはよく見てみることにします。
