检测新通知的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