【初心者向け】jQueryで表示・非表示を制御するメソッド【show、hide、fade、slide】
こんにちは、はとむぎです。
今回は、jQueryの数あるメソッドの中で、「表示・非表示に関するもの」を紹介しようと思います。
今回は以下の流れで解説していこうと思います。
それでは早速いきましょう。
各メソッドの概要
show、hide、toggle
showは、非表示状態の要素を、アニメーションしながら表示します。引数なしのときはパッと現れ、引数ありではそのミリ秒かけてフェードインします。
show – リファレンス
hideは逆に、表示状態の要素を、アニメーションしながら非表示にします。引数なしのときはパッと消え、引数ありではそのミリ秒かけてフェードアウトします。
hide – リファレンス
toggleは、要素が非表示ならshowを、表示されていたらhideを実行します。表示したり消したりを繰り返す時に便利です。
toggle – リファレンス
fadeIn、fadeOut、fadeToggle
fadeInは、非表示状態の要素を、アニメーションしながら表示します。showよりもふわっと表示されます。
fadeIn – リファレンス
fadeOutは逆に、表示状態の要素を、アニメーションしながら非表示にします。hideよりもふわっと非表示になります。
fadeOut – リファレンス
fadeToggleは、要素が非表示ならfadeInを、表示されていたらfadeOutを実行します。表示したり消したりを繰り返す時に便利です。
fadeToggle – リファレンス
slideDown、slideUp、slideToggle
slideDownは、非表示状態の要素を、スライドさせながら表示します。
slideDown – リファレンス
slideUpは逆に、表示状態の要素を、スライドさせながら非表示にします。
slideUp – リファレンス
slideToggleは、要素が非表示ならslideDownを、表示されていたらslideUpを実行します。表示したり消したりを繰り返す時に便利です。
slideToggle – リファレンス
基本的な使い方
まずは、基本的な動作について解説します。基本的には、表示・非表示させたい要素に対して実行するだけです。2種類のオプションがありますので、併せて解説していきます。
// 今回紹介している9つのメソッドは、すべて同じ構文です。
$('target').show( duration, callback );target：
動作を行う対象となるHTML要素です。複数の要素を指定してもOKです。ちなみに、showは非表示の要素に対して、hideは表示されている要素に対して使います。toggleは上にも書いた通り切り替えを行うので、どちらにも使っていけます。
duration（省略可能）：
動作にかかる時間を指定できます。「ミリ秒」と「文字列」で指定ができます（詳しくはこの後解説します）。
callback（省略可能）：
動作が終わった後に行う関数を指定できます。表示が終わった後に別の関数に繋げることができます。
表示・非表示までの時間を制御する
第一引数のdurationの部分で動作時間を制御できます。
ミリ秒で指定
ミリ秒で指定するときは、例えば500なら0.5秒かけてアニメーションします。
文字列で指定
文字列での指定にも対応しており、fast（200ミリ秒）、normal（400ミリ秒）、slow（600ミリ秒）の3つがあります。
初期値についてfade系やslide系のメソッドは、引数なしで実行するとnormal（400ミリ秒）が初期値として設定されます。
動作が終わった後に何かを行う
第二引数のcallbackで、動作完了後に実行するメソッドを指定することができます。こんな感じで指定します。
$(function(){
// 要素をフェードアウトさせたあと、test()を実行する
$('.target').fadeOut( 800, test );
// 無名関数も使えます
$('.target').show( 500, function(){
$(this).css( 'color', 'red' );
});
});まとめ
これらは本当によく使われるメソッドで、アコーディオンメニューやタブ、フォームなど、あらゆる場所に使われます。
UXとしての観点でも優秀で、ユーザーの選択や状況によって表示する内容を変える（不要なものは非表示にする）ことで、より使いやすいサイトにしていくことができると思います。