如何滑下一個li然後.fadeIn（）prepend li？

Question

我想隨便用fadein預先添加li並同時想滑動現有的li。

我試圖遵循這一點，但我無法得到我想要什麼效果。

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

Answer 1

爲了獲得元素滑下去，你要使用填充代替，因爲這將迫使下面的元素向下移動爲好。插入新元素時，只需重置填充。

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

我不知道爲什麼前置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(); 
}); 

Answer 2

嘗試：

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