●toggleメソッド

ここで紹介するtoggleはイベントではなくメソッドです。単語は同じですが構文が異なり
ますので間違えないようにしましょう。機能としてはアニメとフェードで要素を表示したり
消したりします。
リファレンス：toggle(speed)メソッド

　
ソースで着目するのは以下の一行です。これだけで要素の表示/非表示をアニメとフェードで
実現できるのです。シンプルですがカスタマイズは限られており、速度しか設定できません。
速度の指定は引数としてミリ秒を渡します。以下の例では500ミリ秒になっています。

$("div#fadeTarget").toggle(500);

またtoggleは引数を渡さないと演出を省いて表示/非表示を切り替えることができます。
助長な演出を避けたい場合に便利だと思います。
http://www.designdrill.jp/jquery/02/step09b.html
　
ついでに関連するメソッドを紹介します。showメソッドは表示だけ、hideメソッドは非表示
だけを担当します。toggle同様に引数を渡さないと瞬間に表示したり消したりできます。
リファレンス：show(speed)メソッド
リファレンス：hide(speed)メソッド

とても有用な機能に感じるかもしれませんが、実際には次に紹介するslideToggleのほうが
利用する機会が多いように感じます。
　
　
　

●slideToggleメソッド

slideToggleメソッドは縦方向に伸びたり縮んだりする演出です。昔はメニューなどに
よく利用されていました。
リファレンス：slideToggle(speed)メソッド
実用的な複数のボタンを持ったメニューの処理はthis等を利用した、より詳細なセレクタの
指定方法を学んでからにします。
※ここまでの知識だけではメニューの数だけ個別にslideToggleしなければならず効率が悪いのです。

　
ソースを確認してください。jQueryはメソッドがtoggleからslideToggleになっているだけ
です。引数もtoggleと同様に速度をミリ秒で渡すだけです。

$("div#fadeTarget").slideToggle(500);

　
fadeの演出の際には、レイアウトが崩れないように配慮が必要でしたが、slideToggleの
場合はレイアウトを固定しない方が面白い効果を得られます。
以下のstep10b.htmlのサンプルではスライドさせているdivの下に青いdivを配置している
だけです。これだけで、青いブロックが割れてメニューが出てくるように見えます。
http://www.designdrill.jp/jquery/02/step10b.html
これは縦にメニューをつなげた場合にも有効で、サブメニューを表示する伸縮自在の
メニューを簡単に作成できます。
　
最後に関連したメソッドを紹介します。toggleに対するshowやhideと同じメソッドが
slideToggleにもあるのですが、あまり利用しないと思うのでリファレンスへのリンク
だけにします。
リファレンス：slideDown(speed)メソッド
リファレンス：slideUp(speed)メソッド
　
次回は一番応用性の高いanimeteメソッドについて紹介します。
　
　

●cssの属性値をアニメさせる

これまでに紹介したtoggleメソッドやslideToggleメソッドは、演出のカスタマイズが
速度しかできませんでした（その分、構文がシンプルです）。
しかし今回紹介するanimateメソッドは速度だけでなく、位置や大きさも変更できるのです。
　
animeteメソッドは色々なことが設定できるため構文も複雑になります。ですので、まずは
最もシンプルなサンプルで確認しましょう。

　
ソースを確認してください。toggleイベントで青いdivがクリックされる度にanimeTargetのdiv
の幅を変更しています。実際に幅を変更しているのはanimateメソッドを利用している行です。

j$("#animeTarget").animate({width: "300px"});

animateメソッドの構文はこれまでに紹介した構文と同じセレクタとドットの後に書き、後ろに
引数を渡す（）を伴うものです。しかし注意すべきは引数に渡す値です。｛｝に囲まれた複雑な
形式になっていますが、これはオブジェクトとよばれる形式で、複数の属性の値を設定するとき
などに利用します。
構文としては以下の様に｛｝内に属性名と値を：（セミコロンではなくコロン）で挟んで設定
し、複数の属性名と値を設定するときは,（カンマ）で仕切ります。

{ 属性名:値, 属性名：値,　…… }

step11.htmlの例では１つの属性（属性名widthの値を300px）しか設定していないのでカンマは
ありませんでした。以下のサンプルstep12.htmlでは幅と高さ２つの属性を設定しています。
http://www.designdrill.jp/jquery/02/step12.html

アニメできる属性はcssの設定のうち整数値で設定できるものだけです。#fffなど整数値でない
値を設定する色などはアニメさせることはできません（プラグインの追加では可能）。
また属性名がcssと異なる場合があります。-（ハイフン）を利用した属性名はキャメルケース
での置き換えが必要です（例：border-width　→　borderWidth）。
http://www.designdrill.jp/jquery/02/step12b.html
※ブラウザによっては機能しない場合もありそうです。
　macのsafari(5.1)ではborderWidthが小さくなるときアニメされませんでした…

・cssの属性の値にtoggleを設定

animateでは属性の値にtoggleを設定することで、表示されているときは表示しない方向に
アニメ（例えば高さが0になる、透明度が0になる等）し、表示されていないときは元の状態
に戻るような指定ができます。
http://www.designdrill.jp/jquery/02/step13.html
　
　

・速度の指定

ここまでのアニメの設定では速度の指定をしてきませんでした。速度の指定をする場合は
オブジェクト指定の後にカンマを挟み、ミリ秒で指定します。オブジェクトの ｝の後に
設定します。｛｝の中でないことに注意してください。

{ 属性名:値, 属性名：値,　…… } , ミリ秒

http://www.designdrill.jp/jquery/02/step14.html
　
　

・移動する場合の注意点

cssでは位置の指定もできるので、それを利用した演出も可能です。

　
しかし気を付けなければいけないのは、移動させる要素のcss設定でpositionの指定を
しなければならない点です。設定する値は値はabsoluteでもrelativeでもOKです。もし
この設定をしないと移動しません。実際にpositionの指定をしていないサンプルstep15b.html
を用意したので、開いて機能しないことを確認してください。
http://www.designdrill.jp/jquery/02/step15b.html
　
step15.htmlは定位置への移動でしたが算術代入演算子（+=や-=）を利用することで
相対的な移動も可能です。ActionScriptでいう「this._x += 10」と同じですが、構文が
すこし異なり左辺を記述する必要がありません。step16.htmlのソースを確認してください。
http://www.designdrill.jp/jquery/02/step16.html

今回の記事はここまでです。次回はanimateメソッドと合わせて利用するstopメソッドを
紹介します。
　　
　
　

●animateによるアニメの特長

stopメソッドの前にanimateメソッドの特長を説明します。まずはstep17.htmlを開きjQueryの
ソースを確認してください。左に移動する処理と、下に移動する処理がかかれています。
startButtonをクリックすると斜めに移動しそうですが、実際は異なり最初のアニメの処理が
終わってから次のアニメ処理に入ります。

　
これがanimateメソッドによるアニメの特長です。１つづつ処理を完了してから次の処理に入る
ようになっているのです。ちなみに斜めに移動させたい場合は以下のサンプルのように、
１つのanimateメソッドを利用し引数のオブジェクトに２つの属性を指定します。
http://www.designdrill.jp/jquery/02/step17b.html
　
　
このような仕様で問題ないように感じますが、ケースによっては完了せずに次の演出を実行して
欲しい場合があります。step18.htmlを開いてください。各divにマウスオーバーすると横に伸び
マウスアウトで縮むようにになっています。

●stopメソッド

step18.htmlでも良いのですが、マウスアウトしたら伸びるのは中止して縮むようにしたい場合
はどうしたらよいのでしょうか。そこで必要になるのがstopメソッドです。
これを利用すれば新しいアニメが設定された際、現在のアニメをキャンセルしてすぐに
新しいアニメに入ることができます。

　
step18.htmlとstep19.htmlのアニメの仕様はどちらも理解してケースに応じて使い分けられる
ようにしなければなりません。それではstep19.htmlのソースを確認してstopメソッドの構文
を確認しましょう。stopメソッドはシンプルで以下の様に引数は必要ありません。

$(this).stop( );

●メソッドチェーン

jQueryではセレクタが同じ命令に関しては、以下の様に２番目以降のセレクタを省き
メソッドの後ろにメソッドをつなげることができます。この構文のことをメソッドチェーン
と呼びます。

セレクタ.メソッド;
セレクタ.メソッド;
　↓
セレクタ.メソッド;
　　　　.メソッド;
　↓
セレクタ.メソッド.メソッド

step19b.htmlを開きソースを確認してください。メソッドチェーンを利用して２行の処理を
１行にまとめています。

$(this).stop().animate({width: "100px"});

http://www.designdrill.jp/jquery/02/step19b.html　
　　
次回はstopメソッドの引数について説明します。
　
　
　

●stopメソッドの引数

実はstopメソッドには引数が２つ設定できます。
今回は引数の設定による効果の違いを確認します。

stop(引数１, 引数２);

引数に設定できるのは両方ともブーリアン（true / false）だけです。引数を設定しない
場合は自動的に両方ともfalseとして扱われます。
以下のサンプルstep20.html（引数なし）とstep20b.html（引数は２つともfalse）を
比較して、stopボタンの機能が同じ事を確認してください。
http://www.designdrill.jp/jquery/02/step20.html
http://www.designdrill.jp/jquery/02/step20b.html
　
　

●目的地まで移動する

それでは引数をtrueにした場合の効果を確認します。まず簡単な２番目の引数から説明
します。２番目の引数をtrueにすると、アニメを停止した瞬間、目的地に移動するように
なります。step21.htmlを開き、startボタンをクリックして、ゴールに着く前にstopボタン
をクリックしてください。途中でも必ず目的地地点に移動することが確認できます。
http://www.designdrill.jp/jquery/02/step21.html
　
なぜこのような仕様が必要になるかというと、複数のアニメをつなげた演出で辻褄を
合わせるためです。step22.htmlを開いてください。これはjQueryで右に移動した後下に
移動する演出が書かれており、最終目的地が分かるように赤い線が引いてあります。
http://www.designdrill.jp/jquery/02/step22.html
　　
step22.htmlで右移動が完了する前にstopボタンをクリックしてください。すると、
その時点で停止し下に移動します。その結果、赤い線とは異なる場所にゴールしてしまい
ます。ケースによってはこれでも良いのでしょうが、どの様な場合も赤い位置にゴール
させたい場合は、２番目の引数をtrueにします。step22b.htmlは２番目の引数をtrueに
したサンプルです。右に移動する途中でクリックしても、赤い線の場所にゴールする
ことを確認してください。
http://www.designdrill.jp/jquery/02/step22b.html
　
　

●残りのアニメも停止（キャンセル）する

つづいて１番目の引数の説明をします。１番目の引数は複数のアニメがあるときしか
設定する意味がありません。これをtrueにすることで残りのアニメも停止（キャンセル）
することができます。step22.htmlでは右に行く途中でstopボタンをクリックしても
停止するのは右に移動するアニメだけで、下に行くアニメは停止されません。
ですが１番目の引数をtrueにすることで残りの下に行くアニメも停止（キャンセル）
できるのです。
サンプルstep23.htmlを開き、右に移動したいる時にstopボタンをクリックして
ください。すると下に行くアニメもキャンセルされその場で停止させることができます。
http://www.designdrill.jp/jquery/02/step23.html
　
ちなみにstep23.htmlで２番目の引数もtrueにした場合、右に行く途中でstopボタンを
クリックすると右のゴール地点に移動して停止します。残りの下に移動するアニメは
キャンセルされるので下には移動しません。サンプルとしてstep23b.htmlに用意した
ので確認してみてください。
http://www.designdrill.jp/jquery/02/step23b.html
　
もし右に行く途中でクリックした場合も最終地点まで移動させたい場合は
以下のstep23c.htmlのように２つのstopメソッドを利用します。アニメが２つあるので
stopも２つというわけです。ただし１番目の引数はflaseにしなければなりません、
でないと残りのアニメがキャンセルされてしまうからです。
http://www.designdrill.jp/jquery/02/step23c.html
　
　
次回はアニメを管理するqueueという仕組みについて説明します。
　
　
　　
　

●queueという仕組み

jQueryではアニメの演出はqueueという仕組みで管理されます。これはアニメの演出を
格納する配列で、animateだけでなく他の演出も命令（メソッドの実行）されると
queueに格納されていきます。つまり命令された分は律儀に全て実行されます。
　
これは仕様として正しく感じますが、ケースによっては不都合です。step24.htmlを
開いてください。moveボタンをクリックする度にグレーのdivが右に移動します。
このmoveボタンを連打してください。すると連打を中止してもdivは移動し続けます。
これは連打した分のアニメが律儀に全て再生されるためです。
http://www.designdrill.jp/jquery/02/step24.html
　
もしこのような仕様をやめて、連打してもクリックをやめたらすぐに停止して欲しい
場合はどうしたらよいのでしょうか？方法は色々ありますが、まずはstopメソッドを
利用した方法を紹介します。step25.htmlのjQueryを確認してください。移動の前に
stopメソッド（引数を利用して残りのアニメをキャンセルする設定）で止めてから
移動させます。こうすればstopメソッドによって、残りのアニメがキャンセルされる
ため連打を中止すれば停止されます（最後のアニメは通常通り再生されるので、最後の
アニメが終わってから停止します）。ついでにstep25.htmlをメソッドチェーンを利用
して短く書いたstep25b.htmlも用意しました。
http://www.designdrill.jp/jquery/02/step25.html
http://www.designdrill.jp/jquery/02/step25b.html
　
次にstopメソッドを利用しない方法を説明します。そもそもqueueにアニメを登録
しないようにする設定があります（後で書きますが実行しないわけではありません）。
これはanimeteメソッドの別構文なのですが引数として移動のオブジェクトに続けて
「オプション」のオブジェクトを指定できます。
リファレンス：animate(params, options)

これまでのanimateメソッドを、この構文で書き換えたサンプルstep26.htmlのjQueryを
確認してください。これまで速度を指定した部分にオブジェクトが設定され、その中で
速度が指定されています。この構文で速度を指定する場合は以下の様にdurationという
属性として指定します。
http://www.designdrill.jp/jquery/02/step26.html

$("#animeTarget").animate({left: "+=20px"}, 1000);
　↓
$("#animeTarget").animate({left: "+=20px"}, {duration: 1000});

この構文ではオプションに速度以外にqueueに登録するか否かも設定できます。ここで
登録しないようにすれば、ボタンを連打してもqueueに登録されないため、移動し続け
ることはなくなります。構文としては以下の様にオプションの部分にqueue属性をfalse
と設定します。

$("#animeTarget").animate({left: "+=20px"}, {duration: 1000, queue: false});

上記のように設定したサンプルstep27.htmlを用意したので確認してください。ボタンを
連打しても移動し続けることはありません（最後のアニメだけ動きます）。
http://www.designdrill.jp/jquery/02/step27.html
　
ケースによってqueueに登録すべきか否か（もしくはstopの利用）を決めましょう。
あくまでも正確にクリックしただけ移動させたい場合はqueueに登録（stopを利用しな
い）し、動き続けるのが困る場合はqueueに登録しない（又はstopの利用）ようにしま
しょう。
　
　

●queueに登録しないということ

ここまでの書き方では「queueに登録しない＝そのアニメは実行されない」と勘違い
してしまうので、ここで説明を追加します。実はqueueを登録しなくてもアニメは
実行されるのです。ただ実行のタイミングが異なり、前にアニメがあろうと「直ちに
実行」されます。分かりにくいと思うのでサンプルで確認しましょう。
比較のために２つ用意しました。

step28.htmlのjQueryを確認してください（htmlを開くとすぐにdivが移動します）。
アニメは１つづつqueueに格納されるので、右に移動してから下に移動します。
http://www.designdrill.jp/jquery/02/step28.html
　
続いてstep28b.htmlを開いてjQueryを確認してください。２つめのanimateメソッドで
オプションにqueue属性をfalseにする設定があります。こうするとqueueに登録されず
直ちに処理が実行されるため、divが斜めに移動されます。これまでのサンプルは
横方向だけだったので分かりにくかったのですが、このサンプルで正確に仕様を理解
しておきましょう。
http://www.designdrill.jp/jquery/02/step28b.html
　
　
　

●queueメソッドでの疑問

ここでは説明ではなく自分の疑問点を書きます。queueを操作するqueueメソッドと
いうものがあるのですが、ネットで調べていると動きをキャンセルする際に以下の様に
queueメソッドで空のqueueを代入することで、動きをクリアする手法を見かけました。
リファレンス：queue(queue)

$(セレクタ).queue( [ ] );

これはqueueをクリアしているのでstopメソッドの第１引数をtrueにしたのと近い結果
になると思っていたのですが、そうでもないようです。物事を学ぶときは色々試行錯誤
するのですが、そんな中で作成した以下のサンプルstep29.htmlなのですが、stage out
ボタンを押すタイミングでstopとqueueでの挙動が異なることに気が付きました。
http://www.designdrill.jp/jquery/02/step29.html
　
step29.htmlは色々動きを追加して分かりにくいので、step29b.htmlのように簡素化
しました。これで考察してみたいと思います。
http://www.designdrill.jp/jquery/02/step29b.html
　
まず右へ行く途中でstage outボタンをクリックするとstopの方はすぐに停止して
左に戻り、これは予想通り。queueの方は右端まで移動した後で左に移動します。
queue事態にはstopの機能はないので、これも予想通りです。
　
問題は下に行く途中でstage outをクリックした場合です。stopの方は予想通りで
その場で停止し上に移動した後で左に戻ります。しかしqueueのほうが予想と異なり
ました。予想ではstopの機能がないのですから下まで降りてから上に戻ると思ったのに
実際は、すぐに停止して、しばらく上に移動してから斜めに移動します…。
　
animateメソッドのオプションでqueue属性をfalseにしていないのですから斜めに
移動することは無いはずなのに？何故なのでしょう？？　
現時点ではqueue( [ ] )を利用するとqueue属性がfalseになると考えています。
そうすれば斜めに移動することも理解できますし、下に移動しきらずに上に戻る
ことも理解できます（top:300pxで下に行く動きがtop:0pxの戻る動きで上書きされ
下に行く前に上に戻るため）。
ともあれ、仕様として覚えておこうと思います。実際の制作ではあまり問題になり
そうにありませんが、何かの役に立つかもしれませんし。
　
これで演出に関する２章は終了で、次回の３章ではthisについて説明します。
　
　
　
　

●thisが指すもの

ActionScriptでも重要だったthisはjQueryでも重要になってきます。
jQueryでthisは主にセレクタに利用され、イベントハンドラと組み合わせてユーザーが操作した
要素を操作します。シンプルなサンプルとしてstep01.htmlを用意しました。

$(this).animate({width: "300px"});

http://www.designdrill.jp/jquery/03/step01.html
step01.htmlではクリックのイベントハンドラ内でthisを利用しているので、クリックされた
divが操作されるのを確認できます。
　
　

●クリックされた要素の情報を取得する

インタラクティブなコンテンツを作成する際、どのボタンがクリックされたかを調べることは
重要になります。そのような場合もthisを利用します。サンプルstep02.htmlを確認してください。
まずhtmlの各divにidが設定されています。このidを利用してどのボタンがクリックされたかを判断
するわけです。次にjQueryを確認してください。クリックされたdivのidは「this.id」と書くことが
できます（ActionScriptと全く同じ考え方です）。
step02.htmlではdivをクリックすると、そのdivのidをalertで表示します。
http://www.designdrill.jp/jquery/03/step02.html
　
　
さらにActionScript講座ではidからsplitを利用して必要な情報だけを抜き出すことを学びました。
splitはjavaScriptにもあるので同じ事ができます。step02b.htmlではsplitを利用して
idの番号部分だけを抜き出しています（splitはActionScriptの構文と全く同じです）。
http://www.designdrill.jp/jquery/03/step02b.html
　
　
　

●開閉メニュー

実用的なコンテンツを作成する場合は、thisから操作する範囲を広げるテクニックが必要に
なります。開閉メニューを例に説明していきます。まずstep03.htmlを開いてください。
クリックしたdivをslideToggleで開閉させようとしたのですが、セレクタをthisにしているため
クリックしたdivが全て消えてしまい、再び開くことができません。
http://www.designdrill.jp/jquery/03/step03.html
　
ですのでセレクタでthisを利用するのでなく、クリックされたdivに含まれる（内側 / 子要素の）　
divを開閉するように改造しました。それがstep04.htmlです。ここではchildメソッドを利用して
クリックされたdivのchild（子要素）のdivだけを開閉するようにしました。

$(this).children("div").slideToggle();

http://www.designdrill.jp/jquery/03/step04.html
　
childrenのようにセレクタを拡張するメソッドはjQueryではTraversingと呼ばれリファレンスに
まとめられています。リファレンス：Traversing

また子要素を利用するケースは多いので、以下の様にシンプルに記述する構文もあります。　
以下の構文サンプルとしてstep04b.htmlを用意しました。step04.htmlと同じ効果が得られることを
確認してください。

$("div", this).slideToggle();

この構文は短く書くことができて便利ですが、childrenは子要素であることが分かりやすいので
混乱しにくいというメリットがあると思います。
　
　

●ついでにparent

chldrenついでに逆の効果を持つparentを紹介しておきます。step05.htmlを開いてください。
このサンプルでは青い部分（div）をクリックすると、それを含む（親要素）のdivが閉じます。
jQueryを確認すると以下の様に記述されています。

$(this).parent("div").slideToggle();

http://www.designdrill.jp/jquery/03/step05.html
しかし青いdivの親要素を閉じてしまうと全て消えてしまうので、このサンプルは実用的では
ありません。あくまでchildrenのついでにparentの説明をしただけです。
　
　

●便利なnext

では、青い部分を残して青いdivの次にあるdivだけを閉じるにはどうしたらよいでしょうか。
それにはnextを利用します。これは自分の親要素や子要素でなく同じ階層の次の要素を選択
します。サンプルとしてstep06.htmlを用意したので確認してください。青い部分をクリック
すると続くグレーのdivが開閉します。

$(this).next("div").slideToggle();

http://www.designdrill.jp/jquery/03/step06.html
next意外にも前の要素を指すprevなどもありますが、詳しくはリファレンスを確認してください。
Traversingの項目と合わせてselectorsの項目も改めて確認しておくと良いでしょう。両方とも
要素を選択するために重要なものです。
リファレンス：Traversing
リファレンス：selectors
　
　
これでインタラクティブなコンテンツを作成する基礎知識は大体説明したので、次回からは
思いついたままに色々説明していきたいと思います。
ということで３章はこのthisだけで終了になります。
　
　
　

これまでのサンプルではクリックの対象にマウスオーバーしても、カーソルが指カーソルになりません
でした。これではUI的に良くありませんので、今回はマウスカーソルを変更するサンプルを紹介します。
　
とはいえマウスカーソルはcssで変更できるので、jQueryを利用してcssを変更することで対応します。
cssを変更するメソッドはcssメソッドでした。これを利用して以下の様にします。

$(this).css("cursor","pointer");

これをhoverのイベントハンドラで利用すれば、マウスオーバーで指カーソル
マウスアウトで通常のカーソルにする事ができます。以下のサンプルでソースを
確認してください。青いdivにマウスオーバーすると指カーソルになるだけです。
　
http://www.designdrill.jp/jquery/04/01_mouseCursor.html
　
次回はスライドショーケースを紹介する予定です。
　
　
　

ほとんど仕事では使わないであろうテクニックですが、なんとなくサンプルを作成してみました。

　
ポイントはresizeイベントとwidthメソッド/heightメソッドです。resizeイベントの構文は
これまでのイベントハンドラと同様ですが、セレクタとしてwindowを指定します。
このとき注意するのはwindowにはクォートは必要ないという点です。
readyイベントのdocumentも同じようにクォートは必要ありませんでした。

$(window).resize(function(){
　//---リサイズされたときに実行したい処理
})

つづいてwidthメソッド/heightメソッドですが、これも通常のメソッドの構文と同じです。
要素の幅/高さを取得できるのですが、ポイントはセレクタにwindowを指定することで
ブラウザウインドウの幅や高さも取得できるという点です。
※ここでもセレクタのwindowにはクォートは付けません。

$("#mainArea").width();//---要素の幅を取得
$(window).width();//---ブラウザのウインドウ幅を取得

センターに配置する計算式はFlashのフリーサイズFlash講座で説明したものと同じです。
cssでは要素はすべて左上基準になるので、左上を基準としたときの式を利用してください。

始めから中央に

02_center_1.htmlはリサイズしないと中央に移動しませんでした。02_center_2.htmlは
最初に１回、無条件に中央に移動する処理を実行するようにしたので、ページを開くとすぐに
中央に向かって移動を開始します。
http://www.designdrill.jp/jquery/04/02_center_2.html
　
02_center_2.htmlのソースでは、中央に移動する仕組みは別のfunction「setCenterFunc」に
まとめられています。そして最初に一回setCenterFuncを実行することで、ページを開いた時に
リサイズなしで中央に移動するのです。
　
さらに移動するのではなく、始めから中央に配置しておくサンプル「02_center_3.html」も
作成しました。中央に「配置」する場合と「移動する」場合があるので、02_center_2.html
のように「移動するfunction」を作成するのではなく「中央の座標を求めるだけのfunction」
calcCenterFuncを作成しました。最初は、この求めた座標の位置にcssメソッドを使って
配置するだけなので、始めは移動せずに中央に配置されます。
リサイズのイベントハンドラ内では、この位置をanimateメソッドで利用しているので
リサイズの際には移動するようになっています。
http://www.designdrill.jp/jquery/04/02_center_3.html
　
returnはflash同様に１つの値しか返せないので、オブジェクトを作成して返すようにしました。
オブジェクトの作成方法はActionScriptと全く同じです。
次回はページスライダー型のショーケースを紹介する予定です。
　
　
　

前置き

jQueryの講座で、どの様なサンプルを作成するかは未定の部分が多いのですが
Flash講座で作成したショーケースに相当するカリキュラムは実施しようと考えています。
サムネイル＆ディテールのカリキュラムも考えたのですが、これはすでにLightBoxが
普及しているので、カリキュラム化はしない予定です。
google：Light Boxの検索結果
　
あとjQueryはフォームの扱いが得意のようなので（まだ試していないので分かりませんが..）
それを利用した診断系コンテンツの作成にも挑戦したいところです。Flash講座の中では
診断系コンテンツは最も難易度の高いものでしたが、htmlのフォームを利用すれば比較的
簡単に作成できそうな予感がするためです。
　
ということで、今回はFlash講座でも作成したスライダー型のショーケースを作成したいと
思います。今回はボタンでバナーをスライドさせます。別の講座で一定時間毎に切り替え
たりリンクを開く処理を紹介する予定です。
　
　

スライダー型ショーケース

以前にもフェードの紹介でシューケースは扱っていますが、今回は演出が異なります。
バナーは連結され１枚の長い画像になっています。これをスライドさせて表示する
バナーを切り替えます。

　
プログラムの考え方は文法や構文と異なり説明が大変ですし、有料の講座と差別化する必要からも
詳しくは説明はしません。しかしソースにはコメントを書いておくので、googleなどを頼りに
独学してみてください。ActionScript講座を受講された方はページスライダーと同じ考えで
作成されていることが理解できると思います。
　
それではソースを確認していきましょう。htmlには特筆すべき点はありません。しかしcssには
覚えておきべき処理が書かれています。それはdivの領域外を表示しないoverflow属性のhidden
設定です。ソースのcssで#photoAreaを確認してください。
こうすることでdivの外にはみ出した部分は表示されなくなります。

overflow : hidden ; 

つづいてjQuery。ページの管理は変数myPageで行っており、ページ番号は０から始める
ことに注意してください。ページを0から始めるとページ毎の座標は以下の式で算出できます。

　
ショーケースとして完成させる場合は、moveボタンのクリックではなく、一定時間ごとに
自動的に切り替わるようにしなければなりません。それについては別の機会に説明します。
　
ついでなので、次回はサムネイルでスライダーを移動させるサンプルを紹介します。
　
　
　

前回作成したスライダー型ショーケースは、時間でバナーを切り替える前提なので、
カリのインターフェイス（moveボタン）しかありませんでした。ですが折角なので
サムネイルを追加して、選択したバナーを表示するようにしてみました。

　
まずはhtmlのポイントを確認します。サムネイル部分のソースを見てください。各画像にはidが
設定してあり、thumb_0〜thumb_4と命名されています。前回と同様にポイントは０から始める
点です。cssは前回と同様にhiddenの設定を忘れないようにしましょう。
　
jQueryは前回よりもシンプルになっています。ポイントは変数thumb_idを算出している行です。

var thumb_id = Number(this.id.split("_")[1]);

クリックされたidを取得するテクニックはjQuery 03-01:thisが指すものの「クリックされた
要素の情報を取得する」で紹介していますが、今回はさらにNumberが追加されています。
※Flashで講座を受講した方はActionScriptと同じ考え方である事を確認してください。
　
なぜNumberが必要かというと、取得したid（splitして数字だけ取得）は数字ですが、値の型と
しては文字列のため計算に利用できません。ですのでNumberを利用して値の型を数値に変換
する必要があるのです。
※数値化しなくても機能するケースも多いのですが、数値化しておくべきでしょう。
　
今回も講座と差別化するため、単純なサンプルで簡単な説明しかしませんでしたが、独学で挑戦
するかたは、マウスオーバーでサムネイル画像を切り替えたりマウスカーソルを変更することなど
に挑戦してみてください。
　
次回も今回のついでなのですが、分割型のスライダーを紹介します。
前回、今回のサンプルはバナーが連結されているため、クリックしたバナーを表示する際に
他の関係ないバナーが目の前を通り過ぎたり、最後から最初に戻る時に大きく移動します。
　
分割型のバナーではバナーが分割されているので、クリックしたバナーがすぐに登場し、
最後のバナーから最初に戻る際も大きく移動しません。