檢測新通知的jQuery

Question

JS：

$(function() { 

$('.click_hide li').click(function() { 
    var $list = $("ul.system_messages"), 
     $this = $(this); 

    $this.slideUp('fast', function() { 
     $this.remove(); 
    }); 
}); 

$('.click_show li').click(function() { 

    if ($('.click_hide li').is(":visible")) { 
     $('.click_hide li').slideUp('fast', function() { 
      $('.click_hide li').hide(); 


     }); 
    } 
    if ($('.click_hide li').is(":hidden")) { 
     $('.click_hide li').slideDown('fast', function() { 
      $('.click_hide li').show(); 

     }); 
    } 



}); 

});​ 

HTML：

<ul class="notification click_hide"> 
    <li>New product has been purchased</li> 
    <li>Product out of stock</li> 
</ul> 
<ul class = "click_show"> 
    <li>Show Notifications</li> 
</ul> 

CSS：

ul{ 
    border: 1px solid; 
    cursor: pointer; 
}​ 

我有這個示例通知腳本，顯示/隱藏通知和刪除字段時通知被點擊。

我想要做的是當新的<li>字段被動態插入。我想要檢測新的字段並將其突出顯示，例如將字段的顏色更改爲紅色。或者產生一段文字說有新的通知。

的jsfiddle：http://jsfiddle.net/tmL7m/4

Answer 1

當您加載內容到notiification DIV，改變5秒鐘左右的顏色。然後回到正常的顏色。你可以使用setTimeout。

如果你已經包含在你頁面jQuery UI的插件，你可以用亮點方法

$("ul.system_messages").load("load_from_server.php",function(){ 
     $(this).effect("highlight", {}, 3000); 
    }); 

http://docs.jquery.com/UI/Effects/Highlight