Question

当你在转换过程中将鼠标悬停在子菜单上时，我遇到了一个轻微的问题...它非常闪烁，非常糟糕......我尝试添加.stop但它没有帮助，自然很多用户当效果处于转变期间，它会徘徊......所以希望有办法阻止这种情况，我已经建立了以下内容......

http://jsfiddle.net/awxgY/3/

// menu hover functionality
$(document).ready(function () {
  $('nav li,#mini-menu li').hover(
    function () {
  //show its submenu
  $('.sub-nav', this).slideDown(400).stop;
  $('.mini-nav', this).fadeIn(300).stop;
}, 
function () {
  //hide its submenu
  $('.sub-nav,.mini-nav', this).stop(true,true).fadeOut(300);           
}
  );    

// preserves nav hover state
  $("nav ul li .sub-nav").each(function(i){
$(this).hover(function(){
  $(this).parent().find("a").slice(0,1).addClass("navactive");
},function(){
  $(this).parent().find("a").slice(0,1).removeClass("navactive");
});
 });
});

如果您将鼠标悬停在Link 4＆gt;上进入子菜单，当它进来时，你会看到我的意思。

Answer 1

这似乎正常 - http://jsfiddle.net/awxgY/6/

首先，.stop（）需要paranthesis，因为它是一个函数。其次，.stop（）函数应该在任何动画之前被调用..不是在... $('.sub-nav', this).stop().slideDown(400);之后 - 不确定这是否解决了问题b / c我没有真正看到它。动画后停止会导致当前动画停止，这不是你想要的。

我还添加了stopPropagation()调用以消除悬停命令的任何“滚动”。

Answer 2

只需删除菜单和子菜单之间的空白区域即可。 http://jsfiddle.net/ecTLz/

.sub-nav { display: none; position: absolute; overflow: auto; top: 60px; width: 100%; z-index: 500; left: 0; padding: 2em 0;background:#000}

在转换期间悬停在子菜单上时可怕的闪烁

2 个答案: