表示・非表示させる[toggle][slideToggle][fadeToggle][jQuery]

2017年8月5日

要素を交互に表示・非表示することのできる、jQueryのtoggleメソッド・slideToggleメソッドおよびfadeToggleメソッドの挙動を説明いたします。

 

まず下記のデモ画面でtoggleメソッドによる簡単な表示・非表示の様子を見ることができます。

 

デモ画面1

 

 

10行目

表示・非表示させる要素を、あらかじめCSSで「display:none」に指定しています。

 

 

次にtoggleメソッドをslideToggleメソッドに置き換えます。

 

デモ画面2

 

 

fadeToggleメソッドによる挙動は、下記のデモ画面3で見ることができます。

 

デモ画面3

 

 

toggle・slideToggle・fadeToggleメソッド


 

toggle・slideToggle・fadeToggleメソッドの基本的な構文は以下のようになります。

 

 

デモ画面4

 

 

duration
表示・非表示の各動作が完了するまでの時間(ミリ秒)を指定します。上記例のコードでは「2000」に指定しているので、2秒(2000ミリ秒)で動作が完了するように設定されます。時間を指定しない場合(つまりデフォルト)は、400に設定されています。

ミリ秒以外では「normal」「slow」「fast」 といった文字列でも指定できます。それぞれ「400ミリ秒」「600ミリ秒」「200ミリ秒」となっています。

 

easing
イージングの形式(アニメーションの形式)を指定できます。jQueryではswingとlinearが選択でき、デフォルトではswingに設定されています。 swingは徐々に加速しつつまた減速し止まる挙動で、linearは等速運動です。

 

complete
コールバック関数です。動作が完了した時点で、実行させる関数を指定します。デモ画面4では、動作完了後に背景を赤にしています。

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー