jQueryで表示・非表示のアニメーション：toggle(), show(), hide()

アニメーションで表示・非表示を切り替えたいという時、純粋なJavaScriptで実現しようとすると、とてつもない記述量になりますが、jQueryではシンプルな記述でこれを行うことができます。

jQueryには、定番のアニメーションを作るメソッドとして、animate()メソッドというのがありますが、今回は単純な表示・非表示の場合に適切な3つのメソッドを紹介します。

表示・非表示を切り替えるtoggle()

toggle([duration] [,easing] [,callback])

クリックされる毎に、表示・非表示を切り替える時などに使われるメソッドです。

以下のサンプルでは、表示ON/OFFボタンがクリックされると、#textが表示・非表示されます。

HTML

表示ON/OFF
表示されます。

jQuery

$('#toggle').on('click', function() {
  $('#text').toggle('slow');
});

See the Pen [jQuery] 表示・非表示のサンプル by Yuichi Iwayama (@UXMILK) on CodePen.

toggle()の引数には、アニメーションの速さを指定でき、’fast’ や 数値を指定してアニメーションの速度を指定できます。

また、第二引数のeasingや第三引数のcallbackを指定することで、もう少し細かいアニメーションの指定をすることができます。

表示するshow() / 非表示にするhide()

show( [duration] [, easing] [, callback] )
hide( [duration] [, easing] [, callback] )

toggle()とは異なり、表示と非表示のメソッドが分かれています。引数に関しては、toggle()と同じように指定することができます。

以下の例では、「表示する」「非表示にする」ボタンをクリックすると、それぞれ表示・非表示されます。

HTML

表示する
非表示にする
表示されます

jQuery

//表示する
$('#show').on('click', function() {
  $('#text').show('slow');
});
//非表示にする
$('#hide').on('click', function() {
  $('#text').hide('slow');
});

toggle()は、ボタンのクリックによって表示・非表示を切り替える用途で使うことが多いですが、show()とhide()は処理の途中などに使うことが多いです。