Highlight, then fade highlight, for list items dynamically added to a list

Question

I have an unordered list on a page. When that page is refreshed through Ajax, new list items may come back that will be dynamically added to the unordered list. When the new list items get added, I would like to highlight those new list items, but fade the highlight out after a specified time.

I have tried animate and the jquery highlight effect, but have not found the right mixture to get a desired result. What I am doing now, is to call a function after dynamically adding the list item to try to add a highlight class, and then remove that class, but that is not working as well.

The list items are generated and added to the unordered list through PHP.

How would I go about dynamically highlighting new list items after they have been dynamically added to an unordered list, but then fade that highlight out?

The desired result I am looking for is similar to how Scoopler's twitter feed behaves, 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);
});

Tested, I think this does what you want (that is, it holds the display for 3 seconds, and then gives a 3 second fadeout.