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>

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

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

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

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

タイトルとURLをコピーしました