当您将鼠标悬停在正在转换的下拉子菜单上时,我遇到了一个小问题...它闪烁得很厉害,真的很糟糕...我尝试添加 .stop 但它没有帮助,自然很多用户在效果转换时将悬停下来......所以希望有一种方法可以阻止这种情况,我构建了以下......
// 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 上 > 并在子菜单出现时进入子菜单,您就会明白我的意思。
最佳答案
这似乎工作正常 - http://jsfiddle.net/awxgY/6/
首先,.stop() 需要括号,因为它是一个函数。其次,应该在任何动画之前调用 .stop() 函数,而不是在... $('.sub-nav', this).stop().slideDown(400);
-不确定这是否解决了问题,因为我并没有真正看到它。在动画之后放置 stop 会导致当前动画停止,这不是您想要的。
我还添加了 stopPropagation()
调用,以消除悬停命令的任何“滚动”。
关于jquery - 转换期间将鼠标悬停在子菜单上时出现可怕的闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16645993/