こんにちは、ライターのマサトです！
今回は、jQueryからHTML要素をフェードアウトさせながら非表示にすることができる「fadeOut()」について学習をしていきましょう！
この記事では、
- 「fadeOut()」とは？
- 「fadeOut()」の使い方
という基本的な内容から、
- 「fadeOut()」に関数を指定する
- フェードイン・アウトの実現
などの応用的な使い方に関しても解説していきます。この記事で、「fadeOut()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「fadeOut()」とは？
それでは、まず最初に「fadeOut()」について基本的な知識を身に付けていきましょう！ 「fadeOut()」は、HTML要素を少しずつアニメーションさせながら非表示にすることができるメソッドになります。
定番の使い方としては、「ドロップダウンメニュー」などを閉じる際に徐々に非表示にするようなケースがあります。
また、ミリ秒を設定して細かい動きの調整も可能です。本記事では、「fadeOut()」の基本から応用技まで体系的に学習できるように構成しているのでぜひ参考にしてみてください！
「fadeOut()」の使い方
この章では、「fadeOut()」の基本的な使い方について見ていきましょう！ 一般的な構文やその基本的な使い方、ミリ秒を設定して動きを調整する方法などを学んでいきます。
基本的な構文と書き方について
まずは、基本となる構文について見ていきましょう！ フェードアウトさせたい要素に対して、そのままfadeOut()を実行するのが基本となります。
HTML要素.fadeOut( 時間(ミリ秒) )
引数には「時間」を設定することが可能で、単位はミリ秒となります。（詳細は後述します）また、対象要素が複数あっても同じように動作するのが特徴です。
HTML要素をフェードアウトさせる方法
次に、「fadeOut()」を使った実際のプログラミング手法について見ていきましょう！ 例えば、次のようなHTMLがあるとします。
<h1>サンプルタイトル</h1>
この例では、単純なh1要素が配置されているだけです。そこで、このh1要素をフェードアウトさせてみましょう！
$('h1').fadeOut();
このようにh1要素に対して「fadeOut()」を実行するだけです。これだけで、画面に表示されているh1要素が少しずつ非表示になっていくアニメーションが自動的に付与されるのです。
秒数（ミリ秒）を指定してアニメーションする方法
今度は、「fadeOut()」の引数に時間を設定してみましょう！
例えば、時間を「2秒」に設定したら2秒経過するまでゆっくりとアニメーションが行われるという意味になります。そこで先ほどのサンプル例に、時間を付与してみましょう！
$('h1').fadeOut( 2000 );
この例では、引数に「2000」と設定しているので、2秒かけてアニメーションが行われることになります。時間は必ず「ミリ秒」で設定する必要があるので、忘れないようにしましょう！
「fadeOut()」に関数を指定する
「fadeOut()」は、引数に関数を設定することも可能です！記述方法としては、【HTML要素.fadeOut( 時間, 関数 )】のように第2引数へ関数を指定します。
次のサンプル例を見てください！
$('h1').fadeOut(2000, function() {
console.log('フェードアウトされました！');
});
この例では、h1要素に対して2秒かけてフェードアウトさせています。第2引数に関数を設定しており、文字列をコンソールに出力させる処理を記述していますよね？
このように記述することで、fadeOut()の処理が行われたあとに関数を実行することができます。つまり、フェードアウトで表示されたあとにコンソールへ文字列が出力されるというわけです。
フェードイン・アウトの実現
この章では、一般的な「フェードイン・アウト」を実現する簡単な方法について見ていきましょう！ 主に、「fadeIn()」「fadeToggle()」を使ったプログラミング手法について学んでいきます。
「fadeIn()」で要素をフェードアウトする方法
これまで学んできた「fadeOut()」とはまったくの逆パターンになる「fadeIn()」について見ていきましょう！
「fadeIn()」は文字通り、フェードアウトとは逆のフェードインを実装することができるメソッドになります。記述方法も「fadeOut()」とほとんど同じで、例えばh1要素をフェードインさせるには次のように記述します。
$('h1').fadeIn(2000);
この例では、h1要素に対して2秒かけてフェードインを行うように設定していますね。
1つ注意点としては、「fadeIn()」は非表示になっている要素に対して実行できるメソッドであるという点です！ そのため、次のような記述をする場合もあります。
$('h1').hide().fadeIn(2000);
この例では、h1要素を「hide()」で非表示にしてから、「fadeIn()」を使って表示させているわけです。
もちろん、あらかじめCSSで要素を非表示にしていても問題ありません。「fadeIn()」について基本から応用までを次の記事で詳細にまとめているので、ぜひ合わせて参考にしてみてください！
「fadeToggle()」で表示・非表示を繰り返す方法
今度は、「フェードイン・アウト」を何度も繰り返し実行できるメソッドについて見ていきましょう。利用するのは「fadeToggle()」メソッドで、こちらも使い方はfadeOut()とほとんど同じなので便利です。
次のサンプル例を見てください！
$('button').click(function() {
$('h1').fadeToggle();
})
この例では、クリックイベント処理内にfadeToggle()を実行していますね。これにより、ボタンをクリックするたびにh1要素がフェードインとフェードアウトを繰り返すことになります。
fadeToggle()を1つ記述するだけで良いのでコードの効率化にも繋がるわけです。ちなみに、jQueryで利用可能な「toggle()」系の便利メソッドについては次の記事でまとめているので、ぜひ参考にしてみてください！
まとめ
今回は、jQueryから任意のHTML要素をアニメーションさせながらフェードアウトできるfadeOut()について学習しました。
最後に、もう一度ポイントをおさらいしておきましょう！
- 対象要素にfadeOut()を実行するだけでフェードアウトが可能
- 引数にはミリ秒単位の時間を設定することで動きの時間調整が可能
- 関数を利用すると「fadeOut()」実行後に任意の処理を発動できる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
