リンクにイベントを設定する
事前の設定部分ができたので、次はスライドの動作部分です。料理のカテゴリのリンクをクリックしたら、実際にスライドするようにします。jQueryにはスライドのエフェクト機能も用意されていますが、今回は「animate()」メソッドで座標値を指定する方法をとりました。
変更するのはX座標だけなので、leftプロパティにスライドした最終座標値を指定します。この値は、先ほど変数「baseX」に入れておいたので、「baseX」を指定すればOKです。
$("#washoku").animate({ left : baseX });
ただし、これだけだと、一度スライドさせた後、二度とスライドしなくなってしまいます（同じ座標値に移動するため）。そこで、スライドさせるカテゴリ以外は、再び、左側の見えない位置までずらしましょう。
次に、どのカテゴリがクリックされたのかを示す値を、変数「selectNo」に入れておきます。詳しくは次のページで説明しますが、ブラウザーのウィンドウがリサイズされた時に、座標値を再設定する必要があります。この変数「selectNo」は、その際に使用します。設定する値とカテゴリの対応は以下の表のとおりです。
| 洋食 | 1 |
| 和食 | 2 |
| 中華 | 3 |
| スイーツ | 4 |
以上、ここまでで説明した処理をそれぞれのカテゴリのリンク文字に設定すれば、スライド部分の処理はひととおり完成です。
$("#menu1").click(function(){
$("*:animated").stop();
$("#washoku,#chuka,#sweets").css("left", minLeft);
$("#youshoku").animate({ left : baseX });
selectNo = 1;
return false;
});
$("#menu2").click(function(){
$("*:animated").stop();
$("#youshoku,#chuka,#sweets").css("left", minLeft);
$("#washoku").animate({ left : baseX });
selectNo = 2;
return false;
});
$("#menu3").click(function(){
$("*:animated").stop();
$("#youshoku,#washoku,#sweets").css("left", minLeft);
$("#chuka").animate({ left : baseX });
selectNo = 3;
return false;
});
$("#menu4").click(function(){
$("*:animated").stop();
$("#youshoku,#washoku,#chuka").css("left", minLeft);
$("#sweets").animate({ left : baseX });
selectNo = 4;
return false;
});
なお、各カテゴリの処理の最後にある「return false」は、リンクをクリックしたときのページの移動を防ぐためのものです。これを書いておかないと、<a>タグに書かれているURLのページに移動してしまいます。
