jQueryでマウスオーバー時にタイトルの色を変える方法

jquery

当ブログでも多様しています、タイトルをマウスオーバーすると色が変わる方法ですが、こちらjQueryで実装しています。

タイトルだけではなく、マウスオーバー時に画像ファイルも透明度を変えることができます。
今回はタイトル(htmlタグ)のみを対象に話を進めていきます。

[スポンサーリンク]

今回紹介する方法は、マウスオーバー時に色を変えるとき、ただ変えるだけではなく、じわーっとした感じで少しゆっくりと色を変える方法です。

この章でやること

マウスオーバー時、animateを使って、タイトル(h1タグ)の色を変えます。

マウスオーバー時に色を変えるサンプルソース

jQuery部分のソースコード

$(function() {
     $('h1').hover(
        function(){
            // マウスオーバー時
            $(this).stop().animate({backgroundColor: '#ffaa00'},200);
        },
        function () {
            // マウスを外した時
            $(this).stop().animate({backgroundColor: '#FF3F00'},700);
        }
    );
});

HTML部分のソースコード

<body bgcolor="#e2e2e2">
	<h1>マウスオーバーでここの色が変わります。</h1>
</body>

デモ

実際に動かすことが出来ます

解説

animateの第二引数(200とか700)は、アニメーションが切り替わるまでのミリ秒をあらわしています。
200と700では、200の方が速いです。

サンプルソースでは、200とか700のミリ秒を指定していますが、文字列で、"fast"(200ミリ秒)、"slow"(600ミリ秒)を指定することも可能です。

さいごに

マウスオーバー時にタイトルの色を変える方法は、色々なサイトでみかけます。
見栄えがよくなるだけではなく、実用的なところが嬉しいです。

当ブログでもこの技は結構多様しています。
ヘッダーのメニューのところ(マウスを外した後に余韻がのこるような感じのところ)は、animateを使っていますが、今回紹介した方法と多少使い方が異なります。
このあたりについてはまた次回紹介していきます!
それでは!