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

アニメーションで表示・非表示を切り替えたいという時、純粋なJavaScriptで実現しようとすると、とてつもない記述量になりますが、jQueryではシンプルな記述でこれを行うことができます。 jQueryには、定番のアニメーションを作るメソッドとして、animate()メソッドというのがありますが、今回は単純な表示・非表示の場合に適切な3つのメソッドを紹介します。

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


toggle([duration] [,easing] [,callback])
引数 説明
duration(オプション) String|Int アニメーションの速度を指定
easing(オプション) String アニメーションの種類を指定
callback(オプション) Function アニメーション後に実行する関数を指定
クリックされる毎に、表示・非表示を切り替える時などに使われるメソッドです。 以下のサンプルでは、表示ON/OFFボタンがクリックされると、#textが表示・非表示されます。 HTML


表示されます。

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()は処理の途中などに使うことが多いです。

イベント