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

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

检测新的通知jquery

1 个答案: