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

• 
• ツイートする

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

　メニュー画像の位置は設定できたので、次にマウスオーバー＆アウトで画像が出たり引っ込んだりするようにします。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);
        }
    );