29分でできる！あのサイトの“技”を盗め ― 第21回

意外性が心地よいJSメニューのWebデザイン

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);
        }
    );