如何滑下li然后.fadeIn（）前置li？

Question

我希望随机添加li和fadein同时想要滑入现有的li。

我已经尝试过这个，但我无法完全达到我想要的效果。

$("ul#listticker li:first").slideDown(100, function(){
        $('ul#listticker').prepend($('<li>.....</li>').fadeIn(2000));
    }); 

Answer 1

尝试：

$("ul#listticker li:first").slideDown(100, function(){
    $("<li></li>", { style: "display: none;" }).prependTo("ul#listticker").fadeIn(2000);
}); 

Answer 2

要让元素向下滑动，您需要使用填充，因为这会强制下面的元素向下移动。插入新元素时，只需重置填充。

$("ul#listticker li:first").animate({
    'padding-top': '20px'
}, function(){
    $(this).css('padding-top', '0px');
    $(this).parent().prepend($('<li>.....</li>').fadeIn(1000));
});  

我不确定为什么前面的li实际上会消失，因为它开始时可见......然而，它在这个例子中起作用。如果您确实经历过不正确褪色，请务必先隐藏li。

修改

我已更新我的示例以调整插入的li的高度，并使用margin而不是padding以防li具有某种背景。

http://jsfiddle.net/xixionia/5XhRr/

var $li = $('<li style="height:40px;background:lightblue;">New Item</li>').prependTo('ul#listticker').hide();

$li.next().animate({
    'margin-top': $li.height()
}, function() {
    $(this).css('margin-top', '0px');
    $li.fadeIn();
});