jQueryUIを使ってマウスオーバー時に背景色をアニメーションさせながら変更出来ると今更知った (original) (raw)
2011.01.21
備忘録。マウスオーバー時に背景の
色をアニメーションしながら変更する、
というのをクロスブラウザ対応で実装
したい。css3を使えば簡単な事ですが、
ご存知のようにIEは非対応。で、色々
探してみたんですが、jQueryUIを使う
のが一番良さそうな感じでした。
普通にググったらJquery Color Pluginというプラグインがあったのですが、動作はするけどIEでエラーが出ます。リファレンスを見ても
そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。
(jQuery日本語リファレンス)
と書いてあるし、Jquery Color Pluginを直すのも面倒だし、どうしようかなと思ったんですが、jQueryUIを使えば凄く簡単なんですね・・・素人ですみません。
コード
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便利だな、って思いました。これからはよく見てみることにします。