jQueryで画像をアニメーション付きで拡大する
作例は、例によって架空のグルメガイドサイト「東京食べ歩きガイド」です。「洋食」「和食」といった料理のカテゴリごとにまとめているお店の一覧ページに、Contreformeのような処理を加えていきましょう。
「東京食べ歩きガイド」の料理カテゴリページ。お店の情報が画像付きで一覧になっています
使用するライブラリは、前回も使ったおなじみの「jQuery」です（関連記事）。クリックするたびに画像を拡大縮小させ、同時に、お店の詳細情報を表示／非表示を切り替えるスクリプトを作ります。
まず、HTMLタグを設定しましょう。お店の写真と画像は<div>タグで囲みます。この<div>タグには、お店全体の情報であることを示す「food」というスタイルシートのクラス名を付けておきます。お店の詳細情報部分も<div>タグで囲み、こちらはクラス名「info」を指定します。
<div class="food">
<img src="photo/shop1.jpg" width="60" height="40" align="left" alt="メリメロ">
メリメロ<br>
千代田区飯田橋4-5-4 第3山和ビル101<br>
<div class="info">
飯田橋から少し離れたところにあるフランス田舎料理のお店。オーガニック野菜や天然魚にこだわり。自家製のふかふかフォカッチャも◎。かわいいお店。<br>
<a href="shop1/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
次にスクリプトです。マウスクリックするたびに画像の拡大、縮小を切り替えるには、「toggle()」メソッドを使います。このメソッドのパラメータに、画像を拡大する処理と縮小する処理をそれぞれ書きます。
画像のサイズをアニメーションさせながら変更するのは、「animate()」メソッドです。アニメーションが終了した時の画像サイズを、パラメータ「width」（横幅）、「height」（縦幅）の値に指定します。たとえば以下のようにすると、横幅180ピクセル、縦幅120ピクセルの画像になります。
$(this).animate({
width : 180,
height : 120
}
このwidthとheightの値を変えることで、アニメーション拡大時の画像サイズは自由に調整できます。縮小する場合も同様です。今回の作例では、もともと180×120ピクセルの画像を60×40ピクセルで表示しておき、一度クリックすると180×120ピクセルに拡大（元画像のサイズで表示）するようにしました。また、もう一度クリックすると、60×40ピクセルに縮小するようにしています。
なお、使用する画像はあらかじめすべて同じサイズに揃えておかないと、縦横比がおかしくなり、ゆがんだ状態で拡大縮小してしまいます。注意してください。
アニメーションさせる速度は、「animate()」の2番目のパラメータで調整できます。単位はミリ秒ですので、たとえば以下のように指定すると、開始から終了まで500ミリ秒 （0.5秒）の時間をかけてアニメーションします。同じく1秒にしたい場合は、1000と指定しましょう（1秒=1000ミリ秒）。
$(this).animate({
width : 180,
height : 120
},
500);
以下がここまでに説明した作例のスクリプト部分です。ひとまず、画像をクリックすることでアニメーション付きで拡大縮小する処理ができました。
$(function(){
$(".food img").toggle(function(){
$(this).animate({
width : 180,
height : 120
},
500);
},function(){
$(this).parent().find("img").animate({
width : 60,
height : 40
}, 200);
});
});
