jQuery查詢 <Li> 向上滑動動畫

Question

我正在嘗試向上滑動<ul>各個<li>元素，但是獲得的效果類似於“盲目”動畫，而不是一直向上滑動。

看一下我當前的代碼： http : //jsfiddle.net/VpApX/

我還嘗試了將整個UL向上滑動，這給了我所需的滾動效果，但是動畫結尾處有一個不可思議的問題。

在整個ul上滑動時，如何使元素一直向上滑動或消除發生的跳動？

編輯

http://jsfiddle.net/VpApX/4/單擊“ Test Ul”時的動畫就是我想要的，出於某種原因，即使動畫結束，我也不會感到生澀，盡管這解決了我的問題。 我以某種方式修復了將其復制到jsfiddle .....

Answer 1

您遇到的混蛋是一個眾所周知的錯誤，當在沒有定義高度的元素上使用jQuery的slide方法時，就會發生此錯誤。 我假設您不想設置一個定義的高度，因為每當樣式更改或您決定一次在列表中顯示4個以上的項目時，總是需要更改高度。 解決方案是在DOM准備就緒時使用JS設置高度：

$(function(){
    var ul = $('ul');
    ul.height(ul.height()); //the ul element now has an inline style equal to the height the browser originally had to compute
});

Answer 2

上面的答案關於原因是正確的，但是該示例將所有UL設置為相同的高度。 如果您有不同數量的內容，則需要像這樣遍歷它們：

$(function(){
    $('ul').each(function(){
        $(this).height($(this).height());
    });
});