jQueryでテキストリンクのマウスオーバー時に動きをつける

jQuery
2010年03月16日
Share

どのサイトにも必ずあるテキストリンク。それをもう少しおしゃれに表示できないかな？ということでjQueryでアニメーションをつける方法を紹介します。下のアンダーラインからペロッとでてくるので、うるさすぎず、アクセントになると思います！

IE6+, Firefox 3+, Safari4で動作確認済です。

サンプル

必要ファイルをダウンロードする

必要なJavaScriptファイルを下記よりダウンロードします。

背景画像を作る

マウスオーバー時に表示したい背景色を選択し、適当な大きさで塗りつぶします。

コーディング

外部ファイル

<head>内にダウンロードしたファイルを読み込ませます

<script type='text/javascript' src='/sample/js/jquery.js'></script>
<script type='text/javascript' src='/sample/js/jquery.color.js'></script>
<script type='text/javascript' src='/sample/js/jquery.backgroundPosition.js'></script>

JavaScript

お好みでマウスオーバー時の色とアニメーションの速さの設定を変更します

$(function() {
    $("#link_bg a").hover(function() {
        $el = $(this);
        $el.stop().animate({ backgroundPosition: "(0px 0px)", color: "#fff" }, 500); // マウスオーバー時の文字色とアニメーションの速さ
    }, function() {
        $el = $(this);
        $el.stop().animate({ backgroundPosition: "(0px 100px)", color: "#3cf" }, 500); // マウスオーバー後の文字色とアニメーションの速さ
    
    });
});

CSS

CSSでマウスオーバー時に現れる背景の設定をします。backgroundの初期ポジションを100pxにすることで通常時は背景を隠しておきます。

#link_bg a {
		text-decoration: none;
		border-bottom: 1px solid #3cf;
		background: url(/sample/images/link_bg.png) 0 100px no-repeat;
		overflow: hidden;
		}

HTML

あとは指定したID内にテキストリンクをはるだけです！

<p id="link_bg">
この中に<a href="#">テキストリンク</a>をはります。
アニメーションがあるとサイトのアクセントになりますね！
<a href="#">背景色</a>を変えたり、<a href="#">透明度</a>を変えたり、<a href="#">アニメーション</a>の設定を変えて
いろんなバリエーションができそうです！
</p>

ぜひ試してみてください！

記事のトップへ。