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