お知らせボックスを指定秒数表示した後にフェードアウトで消す方法「jQuery」

公開日：2015/05/11 最終更新日：2022/08/27

jQuery webパーツお知らせ

GW、年末年始の連休の案内や配送の遅れといった内容、新年のあいさつなどショップページにお店からのお知らせを表示することはありますよね。お知らせは目立たせる必要はありますが、レイアウトが崩れたりと表示としては邪魔になることもあります。

DIV要素にスクロールを表示してお知らせエリアにする方法

ネットショップ運営の気になる備忘録

お知らせなどのDIV要素にスクロールバーを付ける CSS(overflow)について

省スペースでのお知らせ表示に使えるニュースティッカー

ネットショップ運営の気になる備忘録

省スペースでお知らせを流すニュースティッカー[jQuery.ticker.js]

など、お知らせ表示に使える方法をいくつか紹介していますが、本日はjQueryを使ってお知らせを自動的に消すことができる方法をサンプルソースをまじえながら解説していきます。

jQueryを使ってお知らせボックスを指定秒数表示した後にフェードアウトで消す方法

ショップからのお知らせを表示する際に、一定時間お知らせを表示した後にお知らせを消したいということはないでしょうか？重要なお知らせであれば消さずに残しておいたほうが良いということもありますが、消しても良いとい場合に使える方法を紹介します。

jQueryを使って、指定秒数お知らせを表示してから、お知らせをフェードアウトしながら消す方法を紹介します。すでにjqueryを読み込んで使っているならコピペですぐに実装出来る方法なのでおすすめです。

さて、まずは
http://jquery.com/よりjquery.min.jsをダウンロードしてください。

サンプルソース sample1.html

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $(".message:not(:animated)").fadeIn("slow",function(){
    $(this).delay(5000).fadeOut("slow");
  });
});
</script>

<div class="message">
お知らせ等のメッセージを表示
指定秒数後に枠ごと消えます
このサンプルは5秒で消える設定にしてます
</div>

<style>
body{
    background-color:#fff;
}
.message {
    height:80px;
    text-align:center;
    padding: 20px;
    background: #fff;
    border: 4px #66cdaa solid;
    position: relative;
    z-index: 10;
    font-weight:bold;
    font-size:20px;
}
.message:before {
    content: "";
    position: absolute;
    background: #fff;
    margin: 3px;
    border: 2px #7accb0 solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}
</style>

1行目でjqueryのファイルを読み込んでいます。

2行目から8行目でお知らせボックスのアニメーション、表示秒数などを指定しています。お知らせ用のボックスはdiv class=”message”とクラス名を付けているので.messageとしてボックスを指定してます。クラス名等を変更する場合は、合わせて変更する必要があるので注意してください。

delay(5000)となっている部分で秒数を指定5000は5秒です。10秒ならdelay(10000)と指定します。

10行目から14行目がお知らせのボックスを記述してます。このサンプルではボックス内にテキストしか記述していませんが自由に編集してもらえば良いかと思います。

css部分は参考サイトのデザインを使わせてもらいました。ショップのイメージに合わせて見た目、フォント等は調整してみてください。

時限式でお知らせボックスを表示するサンプル（再読み込みをクリック）

お知らせボックスを指定秒数表示した後にフェードアウトで消す方法(ボタンクリックで指定秒数前に消す機能付き)

さきほどのサンプルは指定秒数経過するまで、お知らせは表示されたままです。もう、内容把握したから消したいということも考えて「お知らせを消す」というボタンを追加して、クリックされた時点でお知らせボックスの表示を消すようにしてみようと思います。

サンプルソース sample2.html

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $(".message:not(:animated)").fadeIn("slow",function(){
    $(this).delay(10000).fadeOut("slow");
  });

  $(".close").click(function() {
    $(".message").stop().fadeOut("slow");
  });	
});
</script>

<div class="message">
お知らせ等のメッセージを表示
指定秒数後に枠ごと消えます
このサンプルは10秒で消える設定にしてます
<button class="close">お知らせを消す</button>
</div>

<style>
body{
    background-color:#fff;
}
.message {
    color: #fff;
    padding: 20px;
    background: #b2946c;
    position: relative;
    z-index: 10;
    font-weight:bold;
    font-size:20px;
    text-align:center;
}
.message:before {
    content: "";
    position: absolute;
    background: #b2946c;
    margin: 4px;
    border: 2px #fff solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}
</style>

さきほどのサンプル1をベースにいくつか追記しています。

8行目から10行目にボタンをクリックした時にお知らせボックスを消す処理を書いています。

18行目のボックス内にお知らせボックスを消すボタンを追加しています。

見た目も変えていますのでCSSの記述も変わっています。

時限式でお知らせボックスを表示(ボタンクリックで非表示機能付き)サンプル（再読み込みをクリック）

ちなみに指定秒数なしで、ボタンクリックでのみ消す場合

お知らせは基本的には表示したままで、ボタンをクリックした時だけ消したいというケースもあるかもしれません。

その場合はサンプル2の4行目から6行目
$(“.message:not(:animated)”).fadeIn(“slow”,function(){
$(this).delay(10000).fadeOut(“slow”);
});
を削除すれば、ボタンクリックした時のみお知らせボックスを消すことが出来るようになります。

ボタンクリックのみでお知らせを消すサンプル1

ボタンクリックのみでお知らせを消すサンプル2 javascriptでdisplay:none

さきほどとは、違う方法も紹介しておきます。javascriptで非表示にする方法です。

display:noneについては、こちらを参考にしてみてください。

ネットショップ運営の気になる備忘録

CSS[display:none;]知っていると意外と便利!!要素の表示・非表示の切り替えが簡単...

サンプルソース

<div id="message" class="message">
お知らせ等のメッセージを表示
ボタンクリックで消えます
javascriptでdisplay:noneを指定する方法
<button class="close" onclick="NonDisp()">お知らせを消す</button>
</div>

<script>
function NonDisp(){
	document.getElementById("message").style.display ="none";
}
</script>

1行目お知らせ枠のDIVに対してid=”message”としてID属性を指定しています。
5行目のボタンの記述でonclick=”NonDisp()”としてクリックされた時にjavascriptで定義しているNonDispを呼び出すようにしています。

8行目から12行目でjavascriptを記述しています。ボタンクリック時に呼び出されるNonDispについて定義しています。ここでは、IDがmessageの要素を非表示にする記述をしています。

お知らせボックスをページの上部の目立つ位置に設置して、指定秒数表示してその後消したい場合使える方法ではないでしょうか。ただし、この方法だとページを読み込む度にお知らせが表示されてしまいます。クッキー等の仕組み利用すればお知らせボックスの表示を1日1回だけにするなど出来るかもしれませんが、また機会があれば紹介したいと思います。

下記の方法もお知らせ表示に活用できるかもしれません。

ネットショップ運営の気になる備忘録