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

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

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

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

引数 説明
duration(オプション) String|Int アニメーションの速度を指定
easing(オプション) String アニメーションの種類を指定
callback(オプション) Function アニメーション後に実行する関数を指定

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

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

HTML

jQuery

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

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

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

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

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

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

HTML

jQuery

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて