检测新的通知jquery


detect new notification jquery

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

当您将内容加载到通知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