2009-11-18 126 views
2

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

我试过动画和jQuery的突出效果,但还没有找到合适的混合物来获得所需的结果。我现在所做的是在动态添加列表项目以尝试添加高亮类别之后调用一个函数,然后删除该类别,但那不起作用。

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

如何在动态添加到无序列表后动态突出显示新列表项,然后突出显示出淡出效果?

我寻找期望的结果是类似Scoopler的Twitter饲料的行为,link text

+0

后的代码,你有这么远那么我们可以提供帮助吗? – JonH 2009-11-18 18:14:20

回答

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

+1

这给了我一个想法,即当我的列表项目使用.animate({backgroundColor:'#ffffff'},3000)添加到列表中时,添加一个高亮级别;淡入高亮区域,然后删除在动画完成后突出显示课程。 – 2009-11-30 21:14:44

-1

如何做一个两步连续动画。

1)动画高亮 2)动画淡出

在一个序列中,而不是在平行执行此操作。

0

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