jquery - 对于动态添加到列表的列表项，突出显示，然后淡出突出显示

Question

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

我尝试过 animate 和 jquery 高亮效果，但没有找到正确的组合来获得所需的结果。我现在正在做的是在动态添加列表项后调用一个函数来尝试添加突出显示类，然后删除该类，但这也不起作用。

通过PHP生成列表项并添加到无序列表中。

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

我正在寻找的期望结果与 Scoopler 的 Twitter feed 的行为类似，link text

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 秒的淡出。