Question

我正在使用metisMenu作为管理员面板。我想让我的侧边栏菜单在鼠标悬停时自动扩展，速度平稳。我正在使用binarytheme的免费软件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文件来消除任何冲突，以缩小问题范围。