●toggleメソッド
ここで紹介するtoggleはイベントではなくメソッドです。単語は同じですが構文が異なり
ますので間違えないようにしましょう。機能としてはアニメとフェードで要素を表示したり
消したりします。
リファレンス:toggle(speed)メソッド
http://www.designdrill.jp/jquery/02/step09.html
※青いdivをクリックすると下の画像がアニメとフェードで消えたり表示されたりします。
ソースで着目するのは以下の一行です。これだけで要素の表示/非表示をアニメとフェードで
実現できるのです。シンプルですがカスタマイズは限られており、速度しか設定できません。
速度の指定は引数としてミリ秒を渡します。以下の例では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しなければならず効率が悪いのです。
http://www.designdrill.jp/jquery/02/step10.html
※青いdivをクリックすると下のdiv領域が消えたり表示されたりします。
ソースを確認してください。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メソッドについて紹介します。