1

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

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

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

这样做的最佳方法是什么?将下拉菜单设置为 0 高度,然后为其高度设置动画以提供幻灯片效果?有没有比 js 做得更好的 css3 动画?

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

4

1 回答 1

2

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

对于滑动效果,您可以使用slideDownslideUp方法

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

jsFiddle 示例

于 2013-06-20T12:36:27.483 回答