2016/2/24更新

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

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

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

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

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

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

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

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

HTML

<button id="toggle">表示ON/OFF</button>
<p id="text">表示されます。</p>

1 2	<button id="toggle">表示ON/OFF</button> <p id="text">表示されます。</p>

jQuery

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

$('#toggle').on('click', function() {

$('#text').toggle('slow');

});

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

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

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

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

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

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

HTML

<button id="show">表示する</button>
<button id="hide">非表示にする</button>
<p id="text">表示されます</p>

<button id="hide">非表示にする</button>

<p id="text">表示されます</p>

jQuery

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

//表示する

$('#show').on('click', function() {

$('#text').show('slow');

});

//非表示にする

$('#hide').on('click', function() {

$('#text').hide('slow');

});

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

HTML jQuery