jQueryアニメ＆エフェクト合わせ技で画像を拡大 (2/5)

• 
• ツイートする

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