当徘徊在他的位置时，子菜单仍会出现

Question

我有一个子菜单，当用Jquery mouseenter和mouseleave事件盘旋时显示。

一切都运作良好，但是在鼠标事件之后有2s延迟，当在li（隐藏的子位置）下方悬停时，该子项仍然显示出来。并且延迟重置每个子鼠标中心/离开......我必须等待+， - 2s才能触发子隐藏/显示事件。

小提琴：http://jsfiddle.net/z9t9k3te/

对于我的工作，我有2个叠加的菜单，我不希望较低的菜单被上面的菜单隐藏。 我想知道是什么原因引起的，动画是不完整的，所以它会重置＆＃34;事件 ？什么是同类效果的最佳解决方案？

谢谢！

Answer 1

我不知道这是不是你想要的，但我添加了

finish()

$(".menu > li").mouseleave(function(){
  $(this).children(".sub-menu").css({
    visibility: "hidden",
    opacity: 0,
  }).finish();
});

JSFIDDLE：http://jsfiddle.net/z9t9k3te/1/

淡出确实令人惊讶。

Answer 2

淡出似乎来自你css中的转换：

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;

删除这些对我的小提琴起了作用。此外，你应该练习将w3c规范放在css w /前缀的末尾。

在相关说明中，您是否有理由在此处使用不透明度和可见性？使用.hover()和display:none代替可见性和不透明度似乎更简单：

$(".menu > li").hover(function(){ 
    $(this).children(".sub-menu").fadeToggle('fast'); 
}); 

另一个好的做法是不使用javascript操作的CSS隐藏内容（无论您使用visibility:hidden还是display:none）。如果您使用javascript显示它，请使用javascript隐藏它。