jQuery slideDown删除最后插入的列表项的数量？

Question

嘿，所有。我有点问题。我有一个有序列表和一系列预先填充的列表项。

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

当我动态添加另一个列表项与jQuery和元素滑下来，它会显示该项目，而不是数量。导致这样的事情：

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

jQuery的做到这一点是：

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

任何想法？

Answer 1

那么，不幸的是，一定不能有一种简单，优雅的方式来实现这一点。一些更多的调整后，我想出了另一种解决方案可能就足够了：

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); 
}); 

追加的项目，得到了新的高度，隐藏新的列表项，动画到新的高度，然后在新的列表褪色项目。看起来有点冒险，但似乎在类似的程度上工作。也许这里的动画有点过分。

Answer 2

slideDown完成后，将列表项目的显示更改为block。这是高度和宽度动画工作所必需的。

您可以通过这样做修复：

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

但由于它等待，直到动画结束，这似乎不太理想。

Answer 3

如果可以接受，fadeIn的作品。我遇到了与表/表行相同类型的问题 - 动画可能会让表格变得相当混乱（并且显然是有序列表！），但渐变函数似乎可行。