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

あのFlashサイトのUIをjQueryで作る (3/5)

マウスオーバーで展開、クリックで折りたたむ

同じY座標に重ねていた画像を展開後にはずらして表示させる

　次に、画像を展開する処理を組み込みます。まず、マウスが一番上にある画像に重なったら、画像を展開させる処理を書きましょう。これには、jQueryの「mouseover()」メソッドを使い、パラメータに展開させる処理を書きます。

　このとき、見た目にカッコよく表示させたいので、「animate()」メソッドを使ってアニメーションさせましょう。アニメーションといっても、スタイルシートのプロパティ値を変化させる簡単なものです。縦方向に画像をスライドさせるので、topプロパティの値を、アニメーションが終わった時の画像の位置に変化するよう、指定します。アニメーションが終わった時の位置とは、画像の高さに上からの順番を示す数を掛けたものです。

　ここまでできたら、今度は、画像をクリックしたときに、パネルが折りたたまれる処理を組み込みます。これには「click()」メソッドを使い、そのパラメータに折りたたまれる処理を書きます。要は、展開時とは逆方向にアニメーションさせればいいので、topプロパティが一番上の画像（最初から表示されている画像）のY座標になるように指定すればOKです。

    $("#sidemenu img:first").mouseover(
        function(){
            for(var i=zst, c=0; i>z; i--){
                $("#ascpanel"+i).animate({
                    top : pos.top+c*$("#ascpanel"+i).attr("height")
                }, 500);
                c++;
            }
        }
    );
    $("#sidemenu img:first").click(
        function(){
            for(var i=zst, c=0; i>=z; i--){
                $("#ascpanel"+i).animate({
                    top : pos.top
                }, 250);
                c++;
            }
        }
    );