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