スライドショー

【jQuery入門】fadeOut()でHTML要素をフェードアウトする方法まとめ!

こんにちは、ライターのマサトです!

今回は、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()」について基本から応用までを次の記事で詳細にまとめているので、ぜひ合わせて参考にしてみてください!

【jQuery入門】fadeIn()でフェードイン・アウトを実現する方法!
更新日 : 2018年6月11日

「fadeToggle()」で表示・非表示を繰り返す方法

今度は、「フェードイン・アウト」を何度も繰り返し実行できるメソッドについて見ていきましょう。利用するのは「fadeToggle()」メソッドで、こちらも使い方はfadeOut()とほとんど同じなので便利です。

次のサンプル例を見てください!

$('button').click(function() {

    $('h1').fadeToggle();

})

この例では、クリックイベント処理内にfadeToggle()を実行していますね。これにより、ボタンをクリックするたびにh1要素がフェードインとフェードアウトを繰り返すことになります。

fadeToggle()を1つ記述するだけで良いのでコードの効率化にも繋がるわけです。ちなみに、jQueryで利用可能な「toggle()」系の便利メソッドについては次の記事でまとめているので、ぜひ参考にしてみてください!

30分で理解!jQueryのtoggle()と3種のメソッド活用術!
更新日 : 2019年5月4日

まとめ

今回は、jQueryから任意のHTML要素をアニメーションさせながらフェードアウトできるfadeOut()について学習しました。

最後に、もう一度ポイントをおさらいしておきましょう!

  • 対象要素にfadeOut()を実行するだけでフェードアウトが可能
  • 引数にはミリ秒単位の時間を設定することで動きの時間調整が可能
  • 関数を利用すると「fadeOut()」実行後に任意の処理を発動できる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。