jQueryで簡単にメッセージをスーッと消す setTimeoutの実装方法

Web上でときどき見る「登録しました」などのメッセージ表示エリアがスーッと消えてなくなる動きを自分もやってみた。

簡単ながら社内システムなどで今後も使えそうなのでメモ。
業務アプリの多くがDBにデータいれて、取り出して、表示...という単調な部分が多いので少しこういう動きのあるものが加わるだけで操作が楽しくなるという不思議。

head内でjQueryを読み込む

<script type="text/javascript" src="<?= base_url()?>js/jquery-1.5.2.min.js"></script>

エラーの場合に表示するメッセージにidをつける

ここではid='msg'としている。setTimeoutでスーッと消したいid名を指定する。

<?php if($error != ""): ?>
  <div id="msg" class="alert-danger"><?php echo $error ?></div>
<?php endif; ?>

<script>
  $(function(){
    setTimeout(function(){
      $('#msg').fadeOut("slow");
    },800);
  });
</script>

あわせて読みたい

jQueryで簡単にフワッと画像を表示させる　lazyload.jsの実装方法 - TechNote

よくWebサイト上で見かける、画面をスクロールしていくとフワッと画像が現れてくるあの小技です。いつか自分も使う機会があったら使ってみようと思っていましたが、本日...

jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNote

jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など...

jQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNote

以前のエントリーjQueryでスライダー機能&#...

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

jQuery本格入門　?JavaScript開発・デザイン効率化の基礎から Ajax・QUnitまで