• かちびと.net

    jQueryUIを使ってマウスオーバー時に背景色をアニメーションさせながら変更出来ると今更知ったので備忘録。今更便利さを知ったのでメモしておきます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

jQueryUIを使ってマウスオーバー時に背景色をアニメーションさせながら変更出来ると今更知った

スポンサーリンク

備忘録。マウスオーバー時に背景の
色をアニメーションしながら変更する、
というのをクロスブラウザ対応で実装
したい。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 – 色を変化させる

URL :
TRB :

Comments & Trackbacks (6)

  1. 天田

    いつも参考にさせていただいています。ありがとうございます。

    この記事の色指定ですがrgbaで指定することは可能でしょうか。自分なりに調べて出来そうということは分ったのですが、上手くいきませんでした。

  2. 通りがかり

    「マウスを乗せると背景カラーがアニメーションしながら変わります。 」
    の部分は、そのソースをコピーしただけじゃ動かないのですか?
    通りがかりでいきなり済みません…。

    • シロ

      コードが正しくても、マークアップやCSSが間違っていると動かないので、コピペで動くケースの方が少ないと思って頂いた方が良いと思います。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services