このページの本文へ

意外性が心地よいJSメニューのWebデザイン (3/5)

2009年04月13日 10時59分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

マウスオーバー&アウトでアニメーションする仕掛けを作る

 メニュー画像の位置は設定できたので、次にマウスオーバー&アウトで画像が出たり引っ込んだりするようにします。jQueryにはマウスオーバー&アウト時の処理用に hover() という命令(メソッド)が用意されています。hover() の最初のパラメータにマウスオーバー時の処理を、次のパラメータにマウスアウト時の処理を書きます。

 今回のスライディングメニューは、マウスオーバー時にはメニュー画像が右側にアニメーションしながら出てきます。jQueryでは手軽にアニメーションできる animate() が用意されており、以下のようにメニュー画像の横位置を0ピクセルにするだけで、メニュー画像がスライドしながら出てきます。


$(this).animate({ "left":"0px" }, 500);


 逆に、メニュー画像を引っ込めるには以下のように横位置を-100ピクセルに設定するだけです。


$(this).animate({ "left":"-100px" }, 500);


 アニメーションの実行時間は、animate() の今は「500」を設定している2番目のパラメータで指定します。値を小さくすると素早く動き、大きくするとゆっくり動きます。単位はミリ秒です。値が「500」なら、500ミリ秒 = 0.5秒でアニメーションが完了します。

 以下がここで説明した部分のソースコードです。


    $("#booknavileft img").hover(
        function(){
            $(this).animate({ "left":"0px" }, 500);
        },
        function(){
            $(this).animate({ "left":"-100px" }, 500);
        }
    );


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く