Question

我正试图在<li>范围内滑动单个<ul>元素，但我得到的效果类似于'百叶窗'动画，而不是一直滑动。

我也试过滑动整个UL，这给了我正在寻找的滚动效果，但动画结束时有一个我无法摆脱的混蛋。

如何让元素一直向上滑动或移除滑动整个ul时发生的混蛋？

修改

http://jsfiddle.net/VpApX/4/单击“测试UI”时的动画就是我的目的，出于某种原因，当动画结束时，我不会得到生涩，但这解决了我的问题。我以某种方式修复了它将其复制到jsfiddle .....

Answer 1

您遇到的混蛋是一个相当着名的错误，当在没有定义高度的元素上使用jQuery的幻灯片方法时会发生这种错误。我假设您不想设置已定义的高度，因为无论何时样式发生更改，您都需要更改，或者您决定一次在列表中显示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());
    });
});

JQuery <li>向上滑动动画</li>

2 个答案: