マウスオーバー&アウトでアニメーションする仕掛けを作る
メニュー画像の位置は設定できたので、次にマウスオーバー&アウトで画像が出たり引っ込んだりするようにします。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);
}
);
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ+jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo!の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド!ページ切換法
- 第16回 jQueryアニメ&エフェクト合わせ技で画像を拡大
- この連載の一覧へ



















![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)


