突出显示，然后淡出突出显示，用于动态添加到列表的列表项答案

【问题标题】：Highlight, then fade highlight, for list items dynamically added to a list突出显示，然后淡出突出显示，用于动态添加到列表的列表项
【发布时间】：2010-12-17 23:55:47
【问题描述】：

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

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

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

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

我正在寻找的期望结果类似于 Scoopler 的 twitter 提要的行为方式，link text

【问题讨论】：

发布您目前拥有的代码以便我们提供帮助？

标签： jquery css highlighting

【解决方案1】：

把它做成一个两步连续动画怎么样。

1) 为高光设置动画 2) 动画淡出

按顺序而不是并行执行此操作。

【讨论】：

【解决方案2】：

jQuery livequery 插件 + 高亮效果怎么样（假设所有 li 都在 ul 中，id 为 ulcontainer）。沿着这条线的东西应该可以工作。

var doIt = function() {};
$(document).ready(function() {
    // doIt empty so no highlight on first page load
    $('#ulcontainer > li').livequery(doIt);
    // now set doIt to something useful
    doIt = function() { $(this).effect("highlight", {}, 3000); };
});
// do ajax and add li's to ul#ulcontainer

【讨论】：

【解决方案3】：

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 秒。

【讨论】：

这让我想到了在使用 .animate( { backgroundColor: '#ffffff' }, 3000); 将我的列表项添加到列表时添加一个突出显示类。淡入高光，然后在动画完成后删除高光类。