「特定エリアの開閉」とはどういうことかというと、
読んで字の如く、『ある領域を開いたり、閉じたりすること』です。
Microsoft Excelのような表計算ソフトの「グループ化」を連想すれば、大体イメージ通りかと思います。
ただ、表計算ソフトの「グループ化」は、
『行全体』だったり、『列全体』だったりするので、厳密に見ると全く違うものだけど。。。
◆主な用途
こんなときやこんなものに使えます。●利用したいシーン
1.普段は隠しておいて、必要なときだけ表示したいシーン
2.逆に不要なときに、閉じて非表示にしたいシーン
●利用したいコンテンツ
1.メニューやリスト
2.長文の説明書き
上記に限らず、使い手次第で様々な用途に使えます。
◆主な方法
開閉する方法はいくつか存在するので、わかる範囲で列挙します。●開閉方法の種類
1.toggleメソッド
2.slideToggleメソッド
3.fadeToggleメソッド
4.showメソッド と hideメソッド の組合せ
5.slideDownメソッド と slideUpメソッド の組合せ
6.fadeInメソッド と fadeOutメソッド の組合せ
ざっと上げると、この6つのいずれかの方法で実現できる。
◆開閉方法の違い
それぞれ描画効果が異なります。また、各メソッドに渡す引数を切り替えることで、
描画スピードもコントロールすることができます。
※今回は「"slow" or "normal" or "fast"」の文字列を渡していますが、
ミリ秒単位で指定することも可能です。（例：1500・・・1.5秒）
言葉だけではイメージし辛いと思うのでサンプルを・・・
1.toggleメソッドのサンプル
slow normal fast描画効果：「対角線方向（閉：右下から左上 開：左上から右下）」で表示・非表示を制御する
＜＜＜開いたり、閉じたりする領域（開始）＞＞＞
$("#toggle-Target").toggle("slow");
＜＜＜開いたり、閉じたりする領域（終了）＞＞＞2.slideToggleメソッドのサンプル
slow normal fast描画効果：「垂直方向（閉：下から上 開：上から下）」で表示・非表示を制御する
＜＜＜開いたり、閉じたりする領域（開始）＞＞＞
$("#slideToggle-Target").slideToggle("slow");
＜＜＜開いたり、閉じたりする領域（終了）＞＞＞3.fadeToggleメソッドのサンプル
slow normal fast描画効果：「指定エリア全面」で表示・非表示を制御する（徐々に消えたり、出たりする）
＜＜＜開いたり、閉じたりする領域（開始）＞＞＞
$("#fadeToggle-Target").fadeToggle("slow");
＜＜＜開いたり、閉じたりする領域（終了）＞＞＞こんなところですね。
次回は「4.showメソッド と hideメソッド の組合せ」から。
それでは、この辺で。
