jQueryで、ふわっと現れてふわっと消えるやつ

Ajax時に、エラーメッセージやアナウンス等の一時的にほしいメッセージを、ふわっと表示して、一定時間がすぎるとふわっと消える処理を紹介します。

結論から、下記jQueryコードはこちら

$('#target_error_box').fadeIn("slow", function () {
  $(this).delay(3000).fadeOut("slow");
});

フェードインのコールバック処理でフェードアウトしてしまおうという作戦です。

HTML全体のサンプル（コピペして使ってみてね）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style type="text/css">
    #target_msg_box{
      display: none; //メッセージはデフォルトで消しておく
    }
  </style>
</head>
<body>
  <button id="fade_in_out_check">クリック</button>

  <div id="target_msg_box">
    エラーメッセージとか一時的なアナウンスが、ふわっと現れてふわっと消える			
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    //クリックイベントが発火した
    $('#fade_in_out_check').on('click', function(){
      //フェードインする
      $('#target_msg_box').fadeIn("slow", function () {
        //コールバックで3秒後にフェードアウト	
        $(this).delay(3000).fadeOut("slow");
      });
    });
  </script>
</body>
</html>

解説１：予めメッセージを記入しておき、デフォルトで非表示にしておく。

#target_msg_box の中に予めメッセージを用意しておき、基本的には非表示にしておく。
あとは、jQueryで表示・非表示をコントロールする作戦です。

解説２：CDN経由でjQueryを読み込む

jQueryのCDNは、主に3つ存在します。
jQuery本家と、Googleと、Microsoftです。
Googleの方がなんとなく安心なので、今回はGoogleさんのCDNを使わせていただきましょう。

CDNってなんじゃ！？

CDNとは、コンテンツデリバリーネットワークと呼ばれて、ざっくりいうと、各基地局がキャッシュする仕組みのことです。
北海道からアクセスする、沖縄からアクセスするときに、比較的近いサーバへアクセスし、コンテンツ（今回で言うjQuery）をデリバリーしてもらうという作戦です。
jQueryなどのライブラリは、特に可変することが少ないのでキャッシュ効率がよいです。
その他にも画像や動画などはキャッシュ効率がいいので、サーバー負荷やサイトの描画速度を気になさる方はCDNサービスを使っての配信も検討すると良いかも。
※Akamai（アカマイ）と呼ばれるサービスが昔から有名です。有料です。