----- ↓ fadeinとfadeout を同時に行う処理 (要画面リロード)----
fadeinを行うと同時にfadeoutを実行し、一時的に画面にメッセージを表示するjQueryを作成しました。
用途はメッセージ送信などを行なった際に、無事送信できたことを通知するバーの実装です。
上記と以下はその実装例です。
画面をリロードすると動作します。
----- ↓ fadeinとfadeout を同時に行う処理 (要画面リロード)----
fadeinとfadeoutを同時に行う処理(通知バー)の作り方
まず以下のようなHTMLとCSSを作成します。
<!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タグを使用していますが、デザインの観点から採用しているだけなので、別のタグに変えてまっても問題ありません。
.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ファイルです。
$(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 を同時に行う処理(通知バー)の作成は完了です。