jQueryで表示・非表示を操作する方法3選

jQueryを使ってHTML要素の表示・非表示をする方法です。

スマホで表示時のメニューの開閉などに使えます。

これは、クラスの追加・削除やスタイルの追加・削除でも対応出来ますが、jQueryには表示・非表示のための機能が既にあるためそれを使ったほうがコードがすっきりして便利です。

HTML要素の表示・非表示

HTML要素の表示には show() を使います。

引数に数値を入れると表示されるまでの時間になります。

数値はミリ秒単位で入力します。

のように書くと2000ミリ秒(2秒)かけてなめらかに表示されるようになります。

HTML要素を非表示にするには hide() を使います。

こちらも引数に数値を入れると非表示になるまでの時間になります。

上の例は2000ミリ秒(2秒)かけて非表示にします。

非表示は、スタイルに display: none; を設定することで非表示になります。

表示は逆に display: none; を削除することで表示します。

つまり、今表示されているかどうかの判定は以下のように書くことが出来ます。

しかし、if 文を使わなくても toggle() というものがあります。

こちらは、表示時は非表示にする処理を、非表示時は表示する処理を実行してくれます。

のように書くと、#btn を連続でクリックした場合は表示・非表示が繰り返されます。

ちなみにこちらも引数に数値を入れるとミリ病単位で表示・非表示にかかる時間を指定できます。

デモ画面を用意しました。

デモ画面のボタンAで show() と hide() を使って表示・非表示を切り替えます。

デモ画面のボタンBで show(), hide() の引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。

デモ画面のボタンGで toggle() を使って表示・非表示を切り替えます。

フェードイン・アウト

フェードイン・アウトは、表示・非表示をする点は同じですが、じんわり表示・非表示されます。

表示するときは以下のように fadeIn() を使います。

こちらも引数にミリ秒単位で表示速度を入力出来ます。

非表示のときは fadeOut() を使います。

こちらも引数にミリ秒単位で非表示にする速度を入力出来ます。

表示・非表示の判定は「HTML要素の表示・非表示」と同様です。

フェードイン・アウトにも toggle() があり、fadeToggle() を使います。

#btn をクリックすると、じんわり表示・非表示を切り替えます。

引数で表示・非表示の速度をミリ秒単位で指定できます。

デモ画面のボタンCで fadeIn() と fadeOut() を使って表示・非表示を切り替えます。

デモ画面のボタンDで fadeIn(), fadeOut() の引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。

デモ画面のボタンIで fadeToggle() を使って表示・非表示を切り替えます。

スライドアップ・スライドダウン

スライドアップ・スライドダウンも同じように表示・非表示を行うものです。

違いは、スライドアップは上に潰れるように非表示になります。

引数にミリ秒単位で非表示の速度を入力出来ます。

スライドダウンは潰れたものが下に膨らむように表示されます。

引数にミリ秒単位で表示の速度を入力出来ます。

１つのボタンで表示を切り替えるには以下のように書きます。

こちらも引数にミリ秒単位で表示・非表示の速度を入力出来ます。

デモ画面のボタンEで slideDown() と slideUp() を使って表示・非表示を切り替えます。

デモ画面のボタンFで slideDown(), slideUp() の引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。

デモ画面のボタンJで slideToggle() を使って表示・非表示を切り替えます。

まとめ

HTML要素の表示・非表示には show(), hide() を使い引数に数値を入力することで速度を調整出来る。

1行で表示・非表示を切り替えるには toggle() を使う。

フェードイン・アウトには fadeIn(), fadeOut() を使い引数に数値を入力することで速度を調整出来る。

1行でフェードイン・アウトを切り替えるには fadeToggle() を使う。

スライドアップ・スライドダウンには slideUp(), slideDown() を使い引数に数値を入力することで速度を調整出来る。

1行でスライドアップ・スライドダウンを切り替えるには slideToggle() を使う。