jQuery slideDown erases number of last inserted list item?

Question

Hey all. I have a bit an issue. I have an ordered list with a series of pre-populated list items.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

When I add another list item dynamically with jQuery, and slide the element down, it will display the item, but not the number. Resulting in something like this:

1. Item 1
2. Item 2
3. Item 3
4. Item 4
Item 5

The jQuery to do this is:

$("ol").append("<li>Item 5</li>");
var l = $("ol").children("li:last");
l.hide().slideDown(1000);

Any ideas?

Answer 1

The slideDown changes the display on the list item to block when it is finished. This is needed for the height and width animations to work.

You could fix it by doing this:

$("ol").append("<li>Item 5</li>");
var l = $("ol").children("li:last");
l.hide().slideDown(1000, function() { $(this).css("display",""); });

But this seems less than ideal because it waits until the end of the animation.

Answer 2

If it's acceptable, fadeIn works. I ran into the same kind of issue with tables/table rows - animation can get pretty messed up on tables (and apparently ordered lists!), but the fade functions seem to work.

Answer 3

Well, unfortunately, there must not be an easy, elegant way to accomplish this. After some more tweaking, I came up with another solution that might suffice:

var ol = $("ol");
ol.append("<li>Item 5</li>");
var l = $("ol").children("li:last");
var h = ol.height();
l.hide();


ol.animate({
   height: h
}, 1000, function() {
   l.fadeIn(1000);
});

Append the item, get the new height, hide the new list item, animate to the new height, and then fade in the new list item. Seems a little hacky, but appears to work to a similar extent. Maybe this is going a little overboard with the animations here.