【jQuery】fadeToggle()で要素の表示/非表示をフェードで切り替える!

要素の表示/非表示をフェードで切り替えるにはjQueryのfadeToggle()メソッドとを使用します。

jQueryのfadeToggle()とは要素のフェードイン、フェードアウトを交互に行うメソッドで、fadeIn()メソッドとfadeOut()メソッドの動作を交互に行うことができます。

また、fadeToggle()メソッドのパラメータにオプションを指定することでアニメーションさせながら要素のフェードイン、フェードアウトを行うことができます。

例えば、パラメータのオプションにdurationを指定すると、フェードイン/フェードアウトの切り替えの速さを設定することができ、オプションにcompleteを指定するとフェードイン/フェードアウトの切り替え後にイベントを発生させることができ、オプションにeasingを指定すると、アニメーション効果を設定することができます。

今回は、jQueryのfadeToggle()メソッドを使って要素の表示/非表示をフェードで切り替える方法について以下の内容で解説していきます。

⚫︎ フェードの表示/非表示切り替えを瞬時に行う場合
⚫︎ フェードの表示/非表示の速さを指定して切り替える場合
⚫︎ フェードの表示/非表示切り替え後にイベント処理を行う場合
⚫︎ フェード切り替え時のアニメーション効果を指定する場合

ハルトさん

今回はjQueryのfadeToggle()メソッドで要素の表示/非表示をフェードで切り替える方法について説明していきます。

さとみさん

はい!
お願いします!

fadeToggle()とは

fadeToggle()メソッドとは要素をフェードイン、フェードアウトを交互に行うメソッドとなります。

fadeToggle()の書き方

fadeToggle()の書き方は下記となります。

パラメータ

⚫︎ オプション:
フェードのアニメーション/span>を指定する

fadeToggle()メソッドのパラメータにオプションを指定することで、アニメーション指定して要素の表示/非表示をフェードで切り替えることができます。

またパラメータの各種オプションは下記となります。

オプション 説明
duration アニメーションの時間。デフォルトは400ms。
(ミリ秒で指定するか、「”fast”」「”slow”」の文字を指定する。)
easing 動きの指定。イージング関数名を指定。デフォルトは「”swing”」
complete アニメーション処理完了後に呼び出す関数を指定する。
デフォルトは指定無し。
step アニメーションのステップ(間隔)を数値で指定する。
queue 処理をキューに入れるかどうか。デフォルトは「true」。
「true」なら入れる。「false」なら入れない。
specialEasing 動きの指定をCSSプロパティごとに別々に指定する

要素の表示/非表示をフェードで切り替えるサンプルコード

fadeToggle()メソッドで要素の表示/非表示をフェードで切り替えるサンプルコードを紹介します。

フェードの表示/非表示切り替えを瞬時に行う場合

フェードの表示/非表示切り替えを瞬時に行う場合はfadeToggle()メソッドのパラメータを指定しないで呼び出します。

sample.html

style.css

index.js

出力結果

fadeToggle()メソッドによって、指定した要素のフェードイン/フェードアウトを交互に行っています。
そのため、ボタンを押すと、sampleAクラスの要素が瞬時にフェードインされたり、フェードアウトされています。

フェードの表示/非表示の速さを指定して切り替える場合

要素の表示/非表示の速さを指定してフェードで切り替える場合はパラメータのオプションにdurationを指定します。

sample.html

style.css

index.js

出力結果

fadeToggle()メソッドのパラメータのオプションにdurationを指定することで、要素のフェードインとフェードアウトの速さを設定しています。
そのため、ボタンを押すと、fadeAクラスの要素は1.5秒かけてフェードイン/アウトが行われ、fadeBクラスに要素は遅めにフェードイン/アウトが行われています。

さとみさん

fadeToggle()メソッドのパラメータにオプションを指定すると、アニメーション付きで要素のフェードインとフェードアウトを行うことができるのですね!

ハルトさん

そうですね。
このサンプルコードではフェードの切り替えの速さを設定しています。
速さのデフォルトは0.4秒になるので、単純に遅くしたい場合は「slow」を設定し、単純に速くしたい場合は「fast」を文字列で指定すると良いと思います。
また、時間を指定したいのであれば、ミリ秒単位(1000ms=1秒)で指定してあげると良いですよ。

フェードの表示/非表示切り替え後にイベント処理を行う場合

フェードの表示/非表示切り替え後にイベント処理を行う場合はfadeToggle()メソッドのパラメータのオプションにcomnpleteを指定します。

sample.html

style.css

index.js

出力結果

fadeToggle()メソッドのパラメータのオプションにcompleteを指定することで、要素のフェードイン/ダウン後にイベントが行われます。
そのため、ボタンを押すと、fadeAクラスとfadeBクラスの要素がフェードイン/ダウン後に文字が表され、背景色が変更されています。

さとみさん

fadeToggle()メソッドのパラメータにイベントハンドラを指定すると、要素のフェードイン/ダウン後にイベントを行うことができるのですね!

ハルトさん

そうですね。
サンプルコードのようにfadeToggle()メソッドの後にアクションを起こしたい場合は関数を指定してあげると良いですよ。

フェード切り替え時のアニメーション効果を指定する場合

フェード切り替え時のアニメーション効果を指定する場合は、パラメータのオプションにeasingを指定します。

sample.html

style.css

index.js

出力結果

パラメータのオプションにeasingを指定することで、要素のフェード切り替え時のアニメーション効果を指定することができます。
その為、ボタンを押すとlinearでフェード切り替えが行われています。

さとみさん

fadeToggle()メソッドのパラメータのオプションにlinearを指定することでフェード切り替え時のアニメーション効果を指定することができるのですね!

ハルトさん

そうですね。
デフォルトはeasingが指定されますが、今回はlinearでアニメーション効果を指定しています。
また、jQuery Easing Pluginに様々なeasingが用意されているので他のアニメーション効果を指定したい場合は、jQuery Easing Pluginを使用しましょう。

今回のポイント

fadeToggle()で要素を交互にフェードイン/ダウン

⚫︎ jQueryで要素の表示/非表示をフェードで切り替えるにはfadeToggle()メソッドでを使用する

⚫︎ 要素のフェードイン/ダウンを瞬時に行う場合はfadeToggle()をパラメータなしで呼び出す

⚫︎ 要素のフェードイン/ダウンを速度を指定して行う場合はfadeToggle()メソッドのパラメータのオプションにdurarionを指定する

⚫︎ 要素のフェードイン/ダウン後にイベントを行う場合はfadeToggle()メソッドのパラメータのオプションにcompleteを指定する

⚫︎ 要素のフェードイン/ダウン後にアニメーション効果を指定する場合はfadeToggle()メソッドのパラメータのオプションにeasingを指定する

Writer

Soshi

株式会社flyhawkのSoshiです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報