最近のWebサイトでは、リンクする要素にマウスカーソルを重ねる、いわゆるロールオーバー時にしゃれた演出を施します。
画像だったり、Flashで作られたサイトなら、かなりさまざまなことが出来るのですが、テキストリンクの場合は「a:hover」要素で多少色などを変更する程度。

しかし、jQueryは使えば非常に簡単にちょっとしゃれた演出をすることが出来ます。
まずはこちらのデモをご覧ください。

• デモを見る

これを実現するためのコードがこちら。

<script type="text/javascript">
    jQuery('a').hover(function() {
        jQuery(this).stop().animate({ 
            paddingLeft: '10px'
        }, 100)
    }, function() {
        jQuery(this).stop().animate({
            paddingLeft: '0'
        }, 100)
    })
</script>

hoverというイベントは、その名の通り要素にマウスが重なった時のイベント。一つ目のパラメータに、マウスが重なった時の処理、二つ目のパラメータに離れた時の処理を書きます。

ここでの処理は「animate」というメソッドを使って、CSSを制御します。
「padding-left」を 10pxに設定します、100ミリ秒をかけて変化させるため、右にすっと動いたように見えます。

逆に、マウスが離れた時は同じく100ミリ秒をかけて「padding-left」が0に戻るので、右にすっと戻るような演出になります。

また、メソッドの間に「stop()」という記述があります。これは、animateを中断するためのもの。なぜなら、この記述がない場合にマウスを高速でリンクの上を行ったり来たりすると、イベントが何度も発生してしまって、カタカタと文字が動き続けてしまいます。

それを防ぐために、新しいanimateが発生する前にそれまでのイベントを中断（キューを空にすると言います）しているのです。

これに、背景の処理などを次のようにCSSで加えます。

a:hover {
    background-color: #0070CB;
    color: #FFF;
    text-decoration: none;
}

これで、ちょっとリッチなロールオーバーが実現できるというわけです。

animateメソッド内にはCSSで指定できるものはおよそ指定できます。背景色や文字色などを変えれば、フェードインのような効果を演出することも出来ます。
ただし、「background-color」が「backgroundColor」となるなど、少しだけ記述の方法が変わります。（キャメルケースという書き方になります）

詳しくは、jQueryの解説サイトなどをご覧くださいませ。
また、animateでさまざまなスタイルを設定しようとすると、不安定になってしまうため、どうしても動きとして見せたいもの以外は、CSSで設定するのがポイント。上手くバランスを取って、素敵な動きを演出しましょう。

[PR] Ajax開発サポート | ちゃんとWebなホームページ制作会社（東京）　エイチツーオー・スペース[H2O Space.]

Tweet