jQueryでフェードインフェードアウトdisplay:noneを使用してfadeToggle【jQuery】

jQueryで複数の要素を個別にフェードイン・フェードアウトの概要

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

display:noneを使用するフェードイン・フェードアウトでは自分が一番気に入っている形です。

採用したのはこの方法でした。採用時は複数のトリガーと複数の要素が組み合わさっているので、短縮のためにサンプルよりも複雑なコードになりましたが、基本の動きはこの形でした。

CSSのtransitionやanimationを使う書き方に比べると、シンプルでわかりやすい書き方です。

環境などの制限がなければ、jQueryはやっぱり便利だな～という印象でした。ただjQueryの更新の問題や、バージョンが古いjQueryだと…というのは数年前から良く見る話でして、中々に難しい話でもあります。

jQueryはできるだけ最新版を使うのが良いでしょう。1系は脆弱性がある、というのは結構前から言われてますね。

ワードプレスのテーマcocoonには、jQueryのバージョンを設定で変更できるので、いいテーマだな～と思います。

fadeToggleの動作サンプル

トリガーをクリックすると、fadeToggleが作動する。

chromeの開発環境でクラスcontentsの行を見ていると、displayの変化と、opacityの変化を見ることができる。

ソースコード

HTML

<div class="trigger">
  <p>ここをクリック（trigger）</p>
</div>
<div class="contents">
  <p>triggerをクリックするとdisplay noneがdisplay blockにかわり、opasityが0から1なる。表示されている状態でクリックすると、opasityが1から0になった後に、display noneになる。<p>
</div>

CSS

.contents {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    padding: .5rem;
    margin-top: .5rem;
    display:none;
  }
.trigger{
      background-color: #bdffc6;
  }

jQuery

$(function() {
  $('.trigger').click(function() {
    $('.contents').stop().fadeToggle(1000);
  });
});

triggerをクリックしたときに、contentsにfadeToggleを動作させる形。

stop()は連続クリックへの対応。

コードの説明

説明を読まなくても見ればわかる、ぐらいの単純なコードになります。

HTMLではクラス設定にて、クリックする場所のtriggerと、要素のcontentsを指定しています。

他の方法では表示・非表示をクラスの切り替えで設定したり、hoverで指定したり、heightを0にしたり、と様々なCSSの記述が増えていましたが、jQueryのfadetoggleを使用する場合は、トリガーと要素の2つのクラスしか使用していません。

CSSのとしては、contentsクラスに初期の表示でdisplay:noneを設定し、その他は表示されたときのデザイン設定をしています。triggerクラスにも見た目の設定しかしていません。

動作部分はjQueryで記述してあります。

clickイベントが起きると、contentsに対して、fadeToggleが作動して、contents内にdisplay:noneがあれば、それを無効にして1000ミリ秒（1秒）で透明度が1になります。display:noneが無ければ、透明が0になった後に、display:noneが有効になります。

cssで透明度の設定をしなくても、fadeToggle側で勝手に対応してくれるのが楽なところです。

コード的には非常に単純で、短くて済みます。JavaScriptでも同様の動作はできますし、コードの耐用性などを考えると、JavaScriptで書いた方が良い環境もあるかと思いますが、jQueryだと手軽なので、用途に合わせて上手く選択するのが良いんだろうな～と思います。

注意点としては、fadeToggleはjQuery 3.0のスリムビルド版では使えない、というところですかね。Bootstrapを導入している時は少し注意が必要でして、公式のドキュメントページでのjQueryのCDNのコードはスリム版になっています。

fadeToggleを使う場合は、jQuery3.0は通常版を使用する必要があります。

fadetoggleの詳細

fadeToggleでは、()の中で、「([duration][,easing][,complete]) 」を設定することができます。

durationには変化に要する時間をミリ秒単位で設定できます。1000ミリ秒が1秒です。

省略時は400msになります。’fast’、’slow’と文字でも設定できます。slowは600fastは200になります。

間違えた設定(‘1000’)とか、をすると、自分の環境では何も設定していなのと同じ動作をしています。

easingには、変化速度の種別を指定します。省略時は ‘swing’ で動作開始時はゆっくりで、後半に早く変化するタイプです。Easingはよくグラフで一覧にしているページなどがあるので、そのあたりをググると良いと思います。

complete には、アニメーションが完了した時に呼び出す関数を指定することができます。

まとめ

コードが短くて済むのと、直感的なのでわかりやすいコードです。

jQueryを使って良ければ実装が楽な方法です。

jQueryを使うことの賛否というのはいろんな意見があり、また、環境によっても変わるので一概には言えないのですが、リスクとリターンの兼ね合いになるので、その時々で適切なものを選択できれば良いのかなと思います。

更新の手間や、更新できないことに脆弱性の問題、どれぐらいの持つのかの耐用性などなど、仕事になるとどうしても制限が生まれるので、中々に難しいのかな～とは思います。

display:noneを使ってフェードイン・フェードアウトをしたいだけならば、かなり簡単な方法なので、利点は大きいかなと思います。