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

How about doing it as a two-step sequential animation.

1) Animate the highlight 2) Animate the fade-out

Do this in a sequence instead of in parallel.

Answer 2

How about jQuery livequery plugin + highlight effect (assuming all li's in ul with id ulcontainer). Something along this lines should work.

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

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.