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

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

説明テキストを非表示からフェードイン

　アニメーション付きで画像の拡大／縮小ができるようになったので、次はお店の詳細情報を表示させる処理に取り掛かりましょう。前のページで、お店の詳細情報の部分を「info」というクラス名のタグで囲っておきました。お店の詳細情報はクリックすると表示されるようにしたいので、この「info」をデフォルトでは表示されないように最初にスタイルシートで指定しておきます。

.info {
    display:none;
}

　スタイルシートで要素を非表示にするには、「visibility:hidden;」もありますが、ここでは必ず「display:none;」を指定してください。今回使用しているjQueryで表示／非表示を切り替えるメソッドでは、displayプロパティを操作するため、visibilityプロパティではうまく動作しません。

　次に、非表示となっている「info」を表示させる処理ですが、瞬時に表示させてしまうとあまり面白味がありません。そこで今回はフェードインさせながら表示するようにしたいと思います。フェードインは、「fadeIn()」というメソッドが用意されていますのでこれを使います。fadeIn()は、最初のパラメータに、フェードインするまでの時間を指定します。単位は先ほどのanimate()と同じく、ミリ秒です。

　詳細情報のフェードインは、画像の拡大と同時にすることもできますが、今回はエフェクトがよりハッキリ分かるように、画像の拡大が完了した後に行なうことにします。こうした処理は、「animate()」メソッドの3番目のパラメータに、アニメーションが完了した時に呼び出す関数を指定しておけば実現できます。つまり、3番目のパラメータにフェードインする処理を書けばOKです。

　ただここでひとつ、問題があります。画像がクリックされた場合に、「$(this)」とすると、「$(this)」は画像自身を示していることになります。単純に「$(this).fadeIn(500)」と書くと、画像がフェードインしてしまうのです。どうにか、フェードインさせたい詳細情報の部分のタグを指し示さないといけません。

　そこで「parent()」と「find()」メソッドを使います。「parent()」は1つ上の階層にあるタグ（親）を示すものです。「find()」は指定された子の要素を検索して返します。お店の詳細情報にはスタイルシートの「info」クラスを指定してあるので、以下のように書くことで、詳細情報をフェードインさせることができます。

$(this).parent().find(".info").fadeIn(500);

　続いて、もう一度同じ画像がクリックされたときに元に戻す処理（詳細情報をフェードアウト→画像を縮小する）は、「fadeOut()」メソッドの2番目のパラメータに画像を縮小する処理を書きます。基本はフェードインと同じなので、これまでに説明した上記の処理が理解できれば難しくないでしょう。

    $(".info").fadeOut(0.1);
    $(".food img").toggle(function(){
        $(this).animate({
            width : 180,
            height : 120
        },
        500,null,
        function(){
            $(this).parent().find(".info").fadeIn(500);
        });
    },function(){
        $(this).parent().find(".info").fadeOut(200,
            function(){
                $(this).parent().find("img").animate({
                    width : 60,
                    height : 40
                }, 200);
            }
        );
    });