要素をフェードイン・フェードアウトすることのできる、jQueryのfadeIn・fadeOutメソッドの挙動を説明します。
スポンサーリンク
今回説明するフェードイン・フェードアウトの様子は、下記のデモ画面で見ることができます。まずは具定例としてのコードを提示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>フェードイン・フェードアウト</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> #sample{height:100px; background:green; display:none;} </style> <head> <body> <button id="button1">フェードイン</button> <button id="button2">フェードアウト</button> <div id="sample"> <h1>サンプル</h1> </div> <script> $(function(){ $("#button1").on('click',function(){ $('#sample').fadeIn(2000, 'linear',function(){ $(this).css('background','blue'); }); }); $("#button2").on('click',function(){ $('#sample').fadeOut(2000, 'linear',function(){ $(this).css('background','green'); }); }); }); </script> </body> </html> |
9行目
フェードインさせる要素を、あらかじめCSSで「display:none」に設定しています。
28行目
フェードインした後にコールバック関数で要素の背景を青色に変更させています。
fadeIn・fadeOutメソッド
|
1 2 |
$(セレクタ).fadeIn(duration, easing, complete); $(セレクタ).fadeOut(duration, easing, complete); |
セレクタで指定した要素（$(セレクタ)）に対して、フェードイン（fadeInメソッド）・フェードアウト（fadeOutメソッド）させています。各パラメータの説明は下記のようになります。
duration
フェードイン・フェードアウトが完了するまでの時間（ミリ秒）を指定します。上記例のコードでは「2000」に指定しているので、2秒（2000ミリ秒）で動作が完了するように設定されます。fadeIn()のように時間を指定しない場合（つまりデフォルト）は、400に設定されています。
ミリ秒以外では「normal」「slow」「fast」 といった文字列でも指定できます。それぞれ「400ミリ秒」「600ミリ秒」「200ミリ秒」となっています。
|
1 |
$(セレクタ).fadeIn('slow'); |
easing
イージングの形式（アニメーションの形式）を指定できます。jQueryではswingとlinearが選択でき、デフォルトではswingに設定されています。 swingは徐々に加速しつつまた減速し止まる挙動で、linearは等速運動です。プラグインを利用すると他のイージングを設定することが可能です。
complete
コールバック関数です。フェードイン・フェードアウトが完了した時点で、実行させる関数を指定します。
