前回学んだ方法は
1.toggleメソッド
2.slideToggleメソッド
3.fadeToggleメソッド
です。
これに対して、
今回は
4.showメソッド と hideメソッド の組合せ
5.slideDownメソッド と slideUpメソッド の組合せ
6.fadeInメソッド と fadeOutメソッド の組合せ
について学びます。
◆開閉方法の違い
4.show-hideメソッドのサンプル
slow normal fast描画効果：「対角線方向（閉：右下から左上 開：左上から右下）」で表示・非表示を制御する
＜＜＜開いたり、閉じたりする領域（開始）＞＞＞
x = $("#showHide-Target");
if (x.is(":hidden")) {
x.show("slow");
} else {
x.hide("slow");
}
＜＜＜開いたり、閉じたりする領域（終了）＞＞＞
5.slideUp-slideDownメソッドのサンプル
slow normal fast描画効果：「垂直方向（閉：下から上 開：上から下）」で表示・非表示を制御する
＜＜＜開いたり、閉じたりする領域（開始）＞＞＞
x = $("#slideUpDown-Target");
if (x.is(":hidden")) {
x.slideDown("slow");
} else {
x.slideUp("slow");
}
＜＜＜開いたり、閉じたりする領域（終了）＞＞＞
6.fadeIn-fadeOutメソッドのサンプル
slow normal fast描画効果：「指定エリア全面」で表示・非表示を制御する（徐々に消えたり、出たりする）
＜＜＜開いたり、閉じたりする領域（開始）＞＞＞
x = $("#fadeInOut-Target");
if (x.is(":hidden")) {
x.fadeIn("slow");
} else {
x.fadeOut("slow");
}
＜＜＜開いたり、閉じたりする領域（終了）＞＞＞
●ここまでで気づいたこと・・・
・前回のtoggle系メソッドと描画効果を類似している・toggle系メソッドの方がコード量が少ない
描画効果の違いについて、
わかりやすくするため、似ているもの同士を左右に並べてみました。
◆開閉方法ごとの比較
大きく3つの描画効果に分けてみました。| 効果 | toggle系 | toggle系以外 |
|---|---|---|
| show/hide |
1.toggleメソッド＜＜＜開閉エリア（開始）＞＞＞ ・・・・・・・・・・・・・・・ ＜＜＜開閉エリア（終了）＞＞＞ |
4.show-hideメソッド＜＜＜開閉エリア（開始）＞＞＞ ・・・・・・・・・・・・・・・ ＜＜＜開閉エリア（終了）＞＞＞ |
| slide |
2.slideToggleメソッド＜＜＜開閉エリア（開始）＞＞＞ ・・・・・・・・・・・・・・・ ＜＜＜開閉エリア（終了）＞＞＞ |
5.slideUp-slideDownメソッド＜＜＜開閉エリア（開始）＞＞＞ ・・・・・・・・・・・・・・・ ＜＜＜開閉エリア（終了）＞＞＞ |
| fade |
3.fadeToggleメソッド＜＜＜開閉エリア（開始）＞＞＞ ・・・・・・・・・・・・・・・ ＜＜＜開閉エリア（終了）＞＞＞ |
6.fadeIn-fadeOutメソッド＜＜＜開閉エリア（開始）＞＞＞ ・・・・・・・・・・・・・・・ ＜＜＜開閉エリア（終了）＞＞＞ |
このようにして比較してみると、違いは無いように見えます。
実はちょっと違うのかな？とあれこれいじってみましたが、大差無し。
・・・なんてことはない・・・。
jQueryの本家サイト（http://api.jquery.com/）で調べてみたところ、
toggle系のメソッドは、
2本のメソッド（例：toggle VS show⇔hide）を対に呼び出すことと同等と書いてありました。
⇒http://api.jquery.com/toggle/ （"Examples:"の手前辺り）
だったら、コード量の少ない「toggle系メソッド」しか使わなくて良いかも知れませんね。
違いとしては、
使用するjQueryのバージョンによっては使えないところ（↓）なので、
ver1.4以降なら「toggle系メソッド」一択で良さそうです。
●バージョンによる違い
・toggle系以外のメソッド：ver1.0～・toggle系メソッド ：ver1.4～
jQueryのバージョンの違いで大きく出るのは「1.x系」か「2.x系」か？を選択するときで、
しかも、「1.x系」は2015年5月現在で「ver1.11」まで上がっているので、
よほどのこと（バージョンアップにより廃止された機能が必要など）が無い限りは
「toggle系メソッド」を選択して問題ありませんね。
それでは、また。
