首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在过渡期间悬停在子菜单上时出现可怕的闪烁

在过渡期间悬停在子菜单上时出现可怕的闪烁
EN

Stack Overflow用户
提问于 2013-05-20 17:04:07
回答 2查看 839关注 0票数 3

我有一个小问题,当你悬停在一个下拉的子菜单上,而它在transition...it中闪烁得非常,非常糟糕……我试着添加.stop,但它没有帮助,自然许多用户会在效果过渡期间悬停……因此,希望有一种方法可以阻止这种情况,我构建了以下代码...

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

代码语言:javascript
复制
// 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");
});
 });
});

如果你将鼠标悬停在链接4>上,并在它进入时进入子菜单,你就会明白我的意思了。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-05-20 17:22:42

这看起来工作正常-- http://jsfiddle.net/awxgY/6/

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

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

票数 3
EN

Stack Overflow用户

发布于 2013-05-20 17:36:34

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

代码语言:javascript
复制
.sub-nav { display: none; position: absolute; overflow: auto; top: 60px; width: 100%; z-index: 500; left: 0; padding: 2em 0;background:#000}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16645993

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档