こんにちは、ライターのマサトです！
今回は、HTML要素をフェードインさせながら表示することができる「fadeIn()」について学習をしていきましょう！
この記事では、
・「fadeIn()」とは？
・「fadeIn()」の使い方
という基本的な内容から、
・「fadeIn()」に関数を指定する
・イベント処理を実装する方法
・フェードイン・アウトの実現
などの応用的な使い方に関しても解説していきます。
この記事で、「fadeIn()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「fadeIn()」とは？
それでは、まず最初に「fadeIn()」についての基本的な知識から身に付けていきましょう！
「fadeIn()」は、HTML要素をゆっくり時間をかけて表示させることが可能なメソッドです。
一般的には、「ドロップダウンメニュー」「アコーディオンメニュー」などでコンテンツを表示する時に使います。
また、イージングと呼ばれるアニメーション効果を付与することも可能なので、動きのあるWebを作るのも簡単です。
本記事では、「fadeIn()」の基本から応用まで学べるように構成しているので、ぜひ参考にしてみてください！
「fadeIn()」の使い方
この章では、「fadeIn()」の基本的な使い方について見ていきましょう！
一般的な構文やその使い方、表示タイミングの調整などについて学んでいきます。
基本的な構文と書き方について
まずは、基本となる構文について見ていきましょう！
一般的には、アニメーションさせたいHTML要素を対象にして「fadeIn()」を実行するだけです。
HTML要素.fadeIn( 時間（省略可能） );
fadeIn()の引数にはミリ秒を単位とする時間の指定が可能です。（詳細は後述します）
また、対象となるHTML要素は1つだけでなく複数の要素が対象でも同じようにアニメーションできます。
要素をフェードインさせる方法
それでは、「fadeIn()」を使った簡単なサンプルを作ってみましょう！
次のようなHTML要素を用意します。
<h1 style="display: none">サンプルタイトル</h1>
単純なh1要素なのですが、CSSで「display: none」と指定しているのがポイントです。
実を言うと、「fadeIn()」は非表示になっているHTML要素に対してのみ機能するのです。
なぜなら「ゆっくりと表示させる…」という機能しかfadeIn()は持ってないので、事前に非表示にする必要があるわけです。
あとは、このh1要素に対してfadeIn()を実行させればOKです！
$('h1').fadeIn();
このように記述することで、h1要素は非表示の状態からフェードインしながら表示されるようになります。
ちなみに、CSSで非表示にせずに「hide()」を使ってフェードインを実現する方法もあります。
$('h1').hide().fadeIn();
このようにfadeIn()を実行する前にhide()を挿入すれば、事前に対象HTMLを非表示にする必要はありません。
時間を指定してアニメーションする方法
「fadeIn()」はそのまま実行するとアニメーションが速いので、引数に時間を設定する方法が一般的です。
単位はミリ秒で数値をそのまま引数に指定するだけです。
例えば、3秒間かけてフェードイン表示させたい場合は次のように記述します。
$('h1').fadeIn(3000);
この例では、h1要素に対してフェードイン表示させるようにしています。
「fadeIn(3000)」と記述することで、3秒間かけて表示するという意味になるわけです。
「fadeIn()」に関数を指定する
「fadeIn()」は、引数に関数を指定することも可能なので合わせてご紹介しておきます！
記述方法としては、【HTML要素.fadeIn( 時間, 関数 )】のように第2引数へ関数を指定します。
次のサンプル例を見てください！
$('h1').fadeIn(3000, function() {
console.log('フェードインされました！');
});
この例では、h1要素に対して3秒かけてフェードインさせています。
第2引数に関数を設定しており、文字列をコンソールに出力させる処理を記述していますよね？
このように記述することで、fadeIn()の処理が実行されたあとに関数を実行することができます。
つまり、フェードインで表示されたあとにコンソールへ文字列が出力されるというわけです。
イベント処理を実装する方法
「fadeIn()」を実装する場合、何らかのイベント処理と一緒に記述するのが一般的です。
イベントというのは、メニューをクリックしたら…とか、指定の位置にマウスカーソルを重ねたら…などによる処理です。
そこで、例えばクリックをしたらfadeIn()を実行するように記述してみましょう！
$('button').click(function() {
$('h1').fadeIn(3000);
});
この例では、button要素をマウスでクリックした時のイベント処理を記述しています。
イベント処理内でfadeIn()を実行しているのが分かりますか？
このように記述することで、ボタンをクリックするとフェードインによってh1要素が表示されるというわけです。
フェードイン・アウトの実現
この章では、フェードアウトの方法やフェードイン・アウトを繰り返す手法について学習しましょう。
主に、「fadeOut() / fadeToggle()」メソッドの使い方について学んでいきます。
「fadeOut()」で要素をフェードアウトする方法
まずは、「fadeIn()」の逆パターンになる「fadeOut()」メソッドの使い方を学んでいきましょう！
記述方法や使い方については、fadeIn()とほとんど同じなので利用するのは簡単です。
次のサンプル例を見てください！
$('h1').fadeOut(3000);
この例では、h1要素を3秒かけて非表示（フェードアウト）させています。（引数の時間は省略可）
fadeIn()と同じように利用できているのが分かりますね。
もちろん、引数に関数を設定してイベント処理を記述することが可能な点も同じです。
「fadeToggle()」で表示・非表示を繰り返す方法
今度は、フェードイン・アウトを簡単に繰り返すことができるメソッドについて見ていきましょう！
利用するのは「fadeToggle()」メソッドで、こちらも使い方はfadeIn()とほとんど同じなので便利です。
次のサンプル例を見てください！
$('button').click(function() {
$('h1').fadeToggle();
})
この例では、クリックイベント処理内にfadeToggle()を実行していますね。
これにより、ボタンをクリックするたびにh1要素がフェードインとフェードアウトを繰り返すことになります。
fadeToggle()を1つ記述するだけで良いのでコードの効率化にも繋がるわけです。
詳しい使い方や他のToggle系メソッドについては、次の記事でさらに学習することができるので参考にしてみてください！
まとめ
今回は、任意のHTML要素をフェードインさせながら表示できる「fadeIn()」について学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・対象となるHTML要素にfadeIn()を実行するだけでフェードインできる
・引数に数値をミリ秒単位で指定することで表示時間を調整できる
・関数を利用することで実行後の処理を同時に記述できる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
