「fadeOut()」に関数を指定するフェードイン・アウトの実現などの応用的な使い方に関しても解説していきます。「fadeOut()」は、HTML要素を少しずつアニメーションさせながら非表示にすることができるメソッドになります。定番の使い方としては、「ドロップダウンメニュー」などを閉じる際に徐々に非表示にするようなケースがあります。ミリ秒を設定して細かい動きの調整も可能です。一般的な構文やその基本的な使い方、ミリ秒を設定して動きを調整する方法などを学んでいきます。フェードアウトさせたい要素に対して、そのままfadeOut()を実行するのが基本となります。)引数には「時間」を設定することが可能で、単位はミリ秒となります。(詳細は後述します)また、対象要素が複数あっても同じように動作するのが特徴です。次のようなHTMLがあるとします。<h1>サンプルタイトル</h1>この例では、単純なh1要素が配置されているだけです。そこで、このh1要素をフェードアウトさせてみましょう!$('h1').fadeOut();このようにh1要素に対して「fadeOut()」を実行するだけです。これだけで、画面に表示されているh1要素が少しずつ非表示になっていくアニメーションが自動的に付与されるのです。今度は、「fadeOut()」の引数に時間を設定してみましょう!例えば、時間を「2秒」に設定したら2秒経過するまでゆっくりとアニメーションが行われるという意味になります。);この例では、引数に「2000」と設定しているので、2秒かけてアニメーションが行われることになります。)】のように第2引数へ関数を指定します。console.log('フェードアウトされました!');});この例では、h1要素に対して2秒かけてフェードアウトさせています。第2引数に関数を設定しており、文字列をコンソールに出力させる処理を記述していますよね?このように記述することで、fadeOut()の処理が行われたあとに関数を実行することができます。フェードアウトで表示されたあとにコンソールへ文字列が出力されるというわけです。「fadeIn()」「fadeToggle()」を使ったプログラミング手法について学んでいきます。「fadeIn()」で要素をフェードアウトする方法これまで学んできた「fadeOut()」とはまったくの逆パターンになる「fadeIn()」について見ていきましょう!「fadeIn()」は文字通り、フェードアウトとは逆のフェードインを実装することができるメソッドになります。記述方法も「fadeOut()」とほとんど同じで、例えばh1要素をフェードインさせるには次のように記述します。$('h1').fadeIn(2000);この例では、h1要素に対して2秒かけてフェードインを行うように設定していますね。そのため、次のような記述をする場合もあります。$('h1').hide().fadeIn(2000);この例では、h1要素を「hide()」で非表示にしてから、「fadeIn()」を使って表示させているわけです。CSSで要素を非表示にしていても問題ありません。今度は、「フェードイン・アウト」を何度も繰り返し実行できるメソッドについて見ていきましょう。利用するのは「fadeToggle()」メソッドで、こちらも使い方はfadeOut()とほとんど同じなので便利です。$('h1').fadeToggle();})この例では、クリックイベント処理内にfadeToggle()を実行していますね。これにより、ボタンをクリックするたびにh1要素がフェードインとフェードアウトを繰り返すことになります。fadeToggle()を1つ記述するだけで良いのでコードの効率化にも繋がるわけです。2019年5月4日まとめ今回は、jQueryから任意のHTML要素をアニメーションさせながらフェードアウトできるfadeOut()について学習しました。関数を利用すると「fadeOut()」実行後に任意の処理を発動できる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。