フェードイン・フェードアウト[fadeIn][fadeOut][jQuery]

2017年7月22日

要素をフェードイン・フェードアウトすることのできる、jQueryのfadeIn・fadeOutメソッドの挙動を説明します。

 

スポンサーリンク

 

 

今回説明するフェードイン・フェードアウトの様子は、下記のデモ画面で見ることができます。まずは具定例としてのコードを提示します。

 

デモ画面

 

 

9行目
フェードインさせる要素を、あらかじめCSSで「display:none」に設定しています。

 

28行目

フェードインした後にコールバック関数で要素の背景を青色に変更させています。

 

 

fadeIn・fadeOutメソッド


 

 

セレクタで指定した要素($(セレクタ))に対して、フェードイン(fadeInメソッド)・フェードアウト(fadeOutメソッド)させています。各パラメータの説明は下記のようになります。

 

duration

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

 

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

 

easing

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

 

jQuery Easing Plugin

 

 

complete

コールバック関数です。フェードイン・フェードアウトが完了した時点で、実行させる関数を指定します。

 

 

 

LINEで送る
Pocket

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