Question

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

我可以轻松添加fadeIn / fadeOut效果，因为下拉菜单位于页面的可见部分，但只是隐藏。

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

这样做的最佳方法是什么？将下拉列表设置为0高度，然后设置其高度的动画以产生幻灯片效果？是否有比js更好的css3动画？

我无法真正修改菜单的html或最初定位它的基本css，因为它非常复杂。但是想知道是否有可能做出像我建议的那样的事情？

Answer 1

使用display: none代替visible: hidden。

对于滑动效果，您可以使用slideDown和slideUp方法

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

jsFiddle example

向下滚动html元素（<ul>）只是可见性：无</ul>

1 个答案: