突出显示,然后淡入突出显示动态添加到列表的列表项

Question

我在页面上有一个无序列表.当通过Ajax刷新该页面时,可能会返回新的列表项,这些列表项将动态添加到无序列表中.添加新列表项时,我想突出显示这些新列表项,但在指定时间后淡出突出显示.

我尝试了动画和jquery高亮效果,但没有找到合适的混合物来获得理想的结果.我现在正在做的是,在动态添加列表项以尝试添加突出显示类之后调用函数,然后删除该类,但这也不起作用.

生成列表项并通过PHP将其添加到无序列表中.

在动态添加到无序列表后,如何动态突出显示新列表项,然后将该突出显示淡出？

我正在寻找的期望结果类似于Scoopler的Twitter提要行为,链接文本

Answer 1

var colorStr = '#DDDDFF'; // color of highlight
$("li.new").each(function (i,x) {
    $(this).css("background-color",colorStr);
    setTimeout(function(){
        $(x).css("background-color","#ffffff"); // reset background
        $(x).effect("highlight", {color: colorStr}, 3000); // animate
    },3000);
});

经测试,我认为这可以做你想要的(也就是说,它保持显示3秒,然后给出3秒的淡出.