Using jquery, how to I animate adding a new list item to a list?

Question

I have a simple javascript function that allows me to add an item to a list. Note that I use JQuery...

function prependListItem(listName, listItemHTML)
{
    //Shift down list items...
    $("#" + listName + " li:first").slideDown("slow");

    //Add new item to list...
    $(listItemHTML).prependTo("#" + listName)  
}

The 'listName' is simply an <ul> with some <li>'s.

The prepending works fine, but I can't get the slideDown effect to work. I would like the list items to slide down and the new item to then appear on top. Any ideas how to accomplish this? I'm still new to JQuery...

Answer 1

Try:

$("<li>new item</li>").hide().prependTo("#" + listName).slideDown("slow");

In other words:

• Create the new list item;
• Hide it (so it's not visible when added to the list);
• Add it to the top of the list; then
• Slide it down. The other items will slide down.

Answer 2

If you wanted it to be added and slide down at the same time do this:

function prependListItem(listName, listItemHTML){
    $(listItemHTML).hide().prependTo('#' + listName).slideDown('slow');
}

To truly do exactly what you described (slide down, then fade in), you would need something like this:

function prependListItem(listName, listItemHTML){
    $(listItemHTML)
        .hide()
        .css('opacity',0.0)
        .prependTo('#' + listName)
        .slideDown('slow')
        .animate({opacity: 1.0})
}