JQuery slideDown remove count of last inserted list items?
Hey everyone. I have a little problem. I have an ordered list with a series of pre-filled list items.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
When I add a new list item dynamically with jQuery and slide the item down, it displays the item, but not the number. As a result, something like this:
1. Item 1
2. Item 2
3. Item 3
4. Item 4
Item 5
jQuery for this:
$("ol").append("<li>Item 5</li>");
var l = $("ol").children("li:last");
l.hide().slideDown(1000);
Any ideas?
source to share
Well, unfortunately, there can't be an easy and elegant way to achieve this. After some tweaking, I came up with another solution that might be sufficient:
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);
});
Add item, get new height, hide new list item, animate new height, and then disappear into new list item. Seems a bit hacky, but seems to work to a similar extent. Maybe it's a bit overboard with the animation here.
source to share
slideDown
changes the display in the list item to block
when finished. This is needed to animate the height and width.
You can fix this by doing the following:
$("ol").append("<li>Item 5</li>");
var l = $("ol").children("li:last");
l.hide().slideDown(1000, function() { $(this).css("display",""); });
But this seems less ideal because he waits until the end of the animation.
source to share