向下滚动 html 元素 (<ul>)，它只是可见性：无答案

【问题标题】：Scroll down html element (<ul>) that is just visibility:none向下滚动 html 元素 (<ul>)，它只是可见性：无
【发布时间】：2013-06-20 12:26:34
【问题描述】：

我在框架中有一个下拉菜单。下拉菜单部分只是隐藏起来。在父元素悬停时，可见性设置为显示。

由于下拉菜单的位置，我可以轻松添加淡入/淡出效果，因为它位于页面的可见部分，但只是隐藏。

我想要做的是悬停在父元素上，而不是仅仅显示它，我希望它向下滑动。

执行此操作的最佳方法是什么？将下拉菜单设置为 0 高度，然后为其高度设置动画以提供幻灯片效果？有没有css3动画比js做的更好？

我无法真正修改菜单的 html 或最初定位它的基本 css，因为它非常复杂。但想知道是否可以按照我的建议进行操作？

【问题讨论】：

scroll effect，你的意思是slide吗？
不幸的是，无法实现属性从 0 到 auto 的 css 转换。如果您有 5 个列表项，每个列表项 1em 高，您可以将高度从 0 设置为 5em
是的对不起，我的意思是幻灯片！

标签： javascript jquery html css

【解决方案1】：

使用display: none 而不是visible: hidden。

滑动效果可以使用slideDown和slideUp方法

$ul = $('#parentElement ul');
$('#parentElement').hover(
    function() {
        $ul.stop().slideDown("fast");
    },
    function() {
        $ul.stop().slideUp("fast");
    }
);

jsFiddle example

【讨论】：