CSS通知fade

Question

私は小さなWebアプリケーションを作成していますが、AJAXをいくつかの関数で使用して、特定のオブジェクトの作成や削除を行っています。

ユーザーに通知するオブジェクトが正常に作成されたかどうかに応じて、PHPを使用してHTML通知を画面に表示しています。

if ($query) { 
//response to ajax call if successful 
    echo '<div class="alert alert-success"><a class="close" data-dismiss="alert">×</a><h4 class="alert-heading">Success!</h4>Object Added!</div>'; 

}

問題は、それらを削除するには何のリフレッシュがないよう時間をかけて、通知が画面上に構築、です。

私は警告に

function clearAlerts(){ 
     setTimeout(function() { 
      $('.alert').fadeOut('fast'); 
     }, 5000); 
    } 

の下に示し、5秒ごとに削除することができますjQueryの機能を持っている。しかし、私は通知がページに追加されるたびに、とにかく にあるどのようにこの関数を呼び出すこと知りませんjQueryを使用して、通知がページにエコーされたときを検出したり、追加するたびにこのjQuery関数を実行したりすることがあります。

<span class="close-notification">Close</span> 

次にクリックしたときにそれを削除するにはJSのこの作品を使用する：各HTML内に直接、このタグを入れて

おかげ

Answer 1

は、あなたが生成され、あなたが好きな方法でそれをスタイリングすることができますスニペット。

$(document).on('click', '.close-notification', function(){ 
    $(this).parent().fadeOut(); // could use .remove(), .slideUp() etc 
}); 

Answer 2

あなたが望むものは、jQueryによって可能です。まず、例えば、通知のdivにクラスを追加します。

<div class="notification">Notification</div> 

次に、このjQueryの：

$(".notification").live("ready", function(){ 
       $(".notification").setDelay(5000).fadeOut("slow"); 
      });