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

  • 投稿日
  • 更新日
  • 著者 アバター しんぺー
  • カテゴリー Code

閉じるボタンをクリックすると、要素が消えるようにするにはどうすればいいんだろう？

CSSのラジオボタンとか使うのかな？

かんたんに実装する方法ないかな？

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

完成形のイメージ

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

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

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

作成方法

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

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

jQueryとはなにか？初心者向けに解説します。【読み込み方法はCDNがおすすめ】 | sinpe-Blog
jQueryがまだよく分からない人 jQuery公式サイト 動かす時に使います jQueryは主にアニメーショ
sinpe-pgm.com

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

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

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

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

最後に

解説は以上になります。どうでしょう。できましたか。
この記事が少しでもだれかの役に立っているとうれしいです。

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

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

jQuery