Hatoblog(はとブログ)

【初心者向け】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としての観点でも優秀で、ユーザーの選択や状況によって表示する内容を変える(不要なものは非表示にする)ことで、より使いやすいサイトにしていくことができると思います。