【jQuery初心者】閉じるボタンをクリックすると、ゆっくり消える要素を作る

今回は閉じるボタンをクリックするとゆっくりと消える要素を作りたいと思います。

完成形のイメージ

See the Pen パンフレット by shimpei (@shimpei) on CodePen.

完成形のイメージは上記です。

画像右上の赤色の丸い「閉じるボタン」をクリックすると、ゆっくりと要素が消えます。

作成方法

簡単に作成方法を説明していきます。
HTML&CSSがメインなので、jQueryがまだよくわからない方でも大丈夫だと思います〜。

jQueryの使い方がわからない方は、こちらをどうぞ。

https://sinpe-pgm.com/what-is-jquery/

HTML

<div class="pamphlet-wrap hover-all">
  <a href="#" target="_blank" rel="noopener"></a>
  <span class="close-btn"><!-- 閉じるボタン --></span>
  <div class="img-wrap ofi">
    <img src="https://picsum.photos/500/500" alt="パンフレット" />
  </div>
  <p class="ttl">パンフレットタイトル</p>
</div>

HTMLはシンプルですね。
空のaタグがありますが、疑似要素にして、要素全体を囲っています。要素のどこをクリックしてもaタグがクリックされるようにしています。

SCSS（CSS ）

.pamphlet-wrap {
  &.hidden {
    opacity: 0;
    visibility: hidden;
  }
}

スタイル全て記述すると長いので、大事なところだけ。
.hiddenのクラスがあるときは、opacity: 0;、visibility: hidden;で非表示になります。
transition: .3s;で、ゆっくりと非表示させたいので、display: none;は使いません。

jQuery

  <script>
    // パンフレット非表示ボタン
    $(function () {
      // .close-btnをクリックすると
      $('.close-btn').on('click', function () {
        // .pamphlet-wrapのクラスに.hiddenクラスを付加する  
        $('.pamphlet-wrap').addClass('hidden');
      });
    });
  </script>

閉じるボタンのクラス(.close-btn)をクリックした時、消したい要素のクラス(.pamphlet-wrap)に.hiddenクラスを付加しています。

1. 閉じるボタン(.close-btn)クリックすると
2. 消したい要素(.pamphlet-wrap)に.hiddenクラスを付加（addClass)
3. .hiddenのクラスはCSS側で、opacity: 0;、visibility: hidden;に設定しているので、ゆっくりと消える

最後に

解説は以上になります。どうでしょう。できましたか。
この記事が少しでもだれかの役に立っているとうれしいです。
同じ悩みをもった「誰か」に届くよう心がけて記事をかいています。

jQueryは不人気ですがWeb制作の現場ではまだまだ現役で使われています。学習時はコチラの書籍が分かりやすくておすすめです。
Webページもあるので、書籍を買う必要はないかと思いますが、jQueryの使い方など丁寧に解説してくれているので初心者にはありがたいです。

最後までありがとうございました。