悬停菜单行为不稳定

Question

我构建了一个简单的悬停菜单。工作示例 here

当用户从左向右快速滚动一点，或者点击填充而不是灰色部分时，菜单会向下滑动，然后再次向上和向下滑动。

我想让它对用户来说是无缝的。因此，当他们始终将鼠标悬停在菜单上时，它就会起作用。

如果你把鼠标悬停在上面，你就会明白我在示例中的意思。

有没有办法让这项工作完美无缺地按预期进行？

$(document).ready(function($) {
    $("#mmenu").hide();
    $("#main-menu").hover(function() {
        $("#mmenu").slideToggle(500);
    });
});

#main-menu{
 background:#fff url(http://www.tzelan.com/wordpress/wp-content/uploads/2015/02/menu-black-bg.png) center center no-repeat;
 background-size: 9px 39px;
 border: 1px solid #b5b5b5;
 border-bottom:none;
 -webkit-border-radius: 5px 0 0 0;
 border-radius: 5px 0 0 0;
 position: absolute;
 left: 50px;
 text-align: center;
 top: 50px;
 vertical-align: middle;
 width: 25px;
 z-index:999;
 cursor:pointer;
 min-height: 100px;
}

#main-menu:after {
 background: url("http://www.tzelan.com/wordpress/wp-content/uploads/2015/01/menu-bottom-arrow.png") no-repeat scroll center bottom;
 bottom: -11px;
 content: "";
 display: block;
 height: 24px;
 left: -1px;
 position: absolute;
 width: 27px;
 z-index: 999;
}

#main-menu #mmenu{
 display: none;
 list-style: outside none none;
 position: relative;
 left: 0px;
 top:-5px;
 text-align: left;
 width: 275px;
 text-transform: uppercase;
 font-size: 10px;
 letter-spacing: 2px;
 font-family:"Apercu Light", Calibri, sans-serif; font-size-adjust:0.508; font-weight:200; font-style:normal;
}

#main-menu #mmenu li{
 height: 25px;
 line-height: 25px;
 padding:7px 0 0;
}

#main-menu #mmenu li a{
 background-color: #948f8f;
 color:#fff;
 text-decoration:none;
 text-align:left;
 padding:0 10px;
 display:block
}

#main-menu #mmenu li a:hover{
 background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
 <nav id="main-menu">

  <ul id="mmenu">
   <li><a href="#">Our Vision</a></li>
   <li><a href="#">Friends & Family</a></li>
   <li><a href="#">Studio Collection</a></li>
   <li><a href="#>Collected Curios</a></li>
   <li><a href="#">Live With Us</a></li>
   <li><a href="#">The Fifth Quarterly Publication</a></li>
  </ul>
 </nav>
</div>

Answer 1

问题是每个悬停事件都会触发 slideToggle。您可能想要做的是每 500 毫秒限制一次这些事件。您需要确切地考虑您希望它如何工作。当有人穿过它时会发生什么？您是否希望他们在菜单打开前将光标停留在菜单上一小段时间？当他们移开光标时会发生什么？多久后？ setTimeout 和 clearTimeout 将成为您的朋友。

PS，手机会怎么用？

Answer 2

我永远无法让 setTimeout 和 clearTimeout 工作，但我确实使用 stop

关闭了 99%

我为可能正在寻找的人使用的代码是：

$(document).ready(function($) {
    $("#mmenu").hide();
    $("#main-menu").hover(function() {
        $("#mmenu").stop(true).slideToggle(500);
    });
});

唯一会发生的情况是，如果用户在菜单上快速滚动，悬停不会结束，因此他们必须将鼠标保持在菜单上，直到悬停结束。

如果有办法强制动画完全加载然后停止就完美了，但我认为那只是吹毛求疵

悬停菜单行为不稳定

Hover menu behaving eratically

javascript

menu

hover

nav