2021.05.09  

【jQuery】fadeinとfadeoutを同時に実装する(通知バーの作成)

JavaScript    

----- ↓ fadeinとfadeout を同時に行う処理 (要画面リロード)----

fadeinを行うと同時にfadeoutを実行し、一時的に画面にメッセージを表示するjQueryを作成しました。

用途はメッセージ送信などを行なった際に、無事送信できたことを通知するバーの実装です。

上記と以下はその実装例です。

画面をリロードすると動作します。

----- ↓ fadeinとfadeout を同時に行う処理 (要画面リロード)----

fadeinとfadeoutを同時に行う処理(通知バー)の作り方

まず以下のようなHTMLとCSSを作成します。

HTML
<!doctype html>
<html lang="ja">
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<html>
  <body>
    <div class="fadein_fadeout">
      <a href="#">表示するメッセージ</a>
    </div>
    <script type="text/javascript" src="fadeIn_fadeOut.js'"></script>
  </body>
</html>

HTML部分については、まずhead部分にjQueryを読み込ませます。

次に、divタグのclass="fadein_fadeout"の中に表示させたい文書を記入します。

最後に外部ファイルとして読み込むJSファイルを「script type="text/javascript" src=」の

「src=」以降に記載します。読み込むJSファイルは後述します。

また、メッセージ表示部分にaタグを使用していますが、デザインの観点から採用しているだけなので、別のタグに変えてまっても問題ありません。

CSS
.fadein_fadeout {
    display: none;   /* 必須 */
    /* 以下はデザイン部分。お好みに修正 */
    width: 100%;  
    margin: 5px 0 5px 20px;
    padding: 0.5em;
    background: aliceblue;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

CSSのdisplay: none; は対象要素を非表示にします。(画面から消す)

これが無いと始めから画面にfadeinしたい要素が表示されてしまうので必須の設定となります。

それ以外は通知バーのデザイン部分となるので、お好みに修正してください。

次はJSファイルです。

fadeIn_fadeOut.js
$(function(){
   $('.fadein_fadeout).fadeIn(1000);
   $('.fadein_fadeout').delay(2000).fadeOut(1000);
});

$(function() { "処理" }); と書くと画面読み込み時にjQueryが実行されるようになります。

次の $('.fadein_fadeout).fadeIn(1000); でfadein_fadeoutクラスを1秒かけて表示(fadein)するように設定しています。

最後に $('.fadein_fadeout').delay(2000).fadeOut(1000); ですが、

delay(2000) と書くと、2秒間処理を実行せずに待機してくれます。

そのあとfadeOut(1000)を実行し、先ほど表示させた通知バーを1秒かけて画面から消します。(fadeOut)

結果以下のものができるという訳です。

----- ↓ fadeinとfadeout を同時に行う処理 (要画面リロード)----

これでfadeinとfadeout を同時に行う処理(通知バー)の作成は完了です。

コメント
現在コメントはありません。
コメントする
コメント入力

名前 (※ 必須)

メールアドレス (※ 必須 画面には表示されません)

送信