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

Answer 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

Answer 3

如何以两步顺序动画的方式进行。

1）为突出显示设置动画 2）为淡出动画

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

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

3 个答案: