javascript - 如何让 metisMenu 在鼠标悬停时自动展开？

Question

我正在使用 metisMenu对于管理员面板。我想让我的侧边栏菜单在鼠标悬停时自动扩展，速度平稳。我正在使用免费软件 advance admin template通过二进制主题。我已经使用以下 CSS 代码在鼠标上自动展开，但展开速度非常快，不受我的控制。

自动展开的CSS代码

.nav li:hover > ul {
    display: block;
}

上面的代码可以工作，但要添加延迟以扩展我使用 jQuery，但这不起作用。

我的 jQuery 代码:

$('.nav li').hover(function(){
    $('li').delay(1000).fadeIn('slow');
});

我还使用过渡效果 transition:all 200ms ease-in-out 0s !important; 来平滑自动展开，但这不起作用。

Answer 1

MetisMenu 支持动画 animate.css像这样:

<ul class="animated bounce"> ... </ul>

您还需要在文档中包含 animate.min.css:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

如果它不起作用，请尝试通过暂时禁用模板中的其他 CSS 文件来消除任何冲突以缩小问题范围。

Examples/Fiddle

Hover example.