jQuery下拉菜单闪烁 [英] jQuery dropdown menu flickering

问题描述

我的下拉菜单使用jquery slideDown和slideUp函数时遇到问题.

I'm having an issue with my dropdown menu which utilises the jquery slideDown and slideUp functions.

如果您将鼠标悬停在下拉UL上，并且在其仍向上滑动时将其移出并移回内部，则它会开始闪烁/闪烁，就好像它在快速quickfire中触发mouseenter和mouseleave事件一样.

If you have your mouse over the dropdown UL, if you move it out and back inside while it is still sliding up it starts flickering/flashing, as if it is firing the mouseenter and mouseleave event in rapid quickfire.

我设置了一个小提琴来说明问题: http://jsfiddle.net/LxL8Q/3/

I have setup a fiddle to illustrate the problem: http://jsfiddle.net/LxL8Q/3/

在Chrome中，它只会闪烁一秒钟，然后自行补救；在Firefox中，它会无限期地闪烁.

In Chrome, it only flickers for a second and then remedies itself, in Firefox however it continues flickering for an indefinite amount of time.

我知道这里有许多有关闪烁的jQuery的问题，但是我找不到任何可以帮助我的答案的东西.

I know there are a number of questions related to flickering jQuery on here, but I was unable to find anything with an answer that could help me.

我确实尝试用简单的悬停功能替换整个.each循环，但是这样做之后，我的Slideup和Slidedown动画无法正常工作.

I did try replacing the entire .each loop with a simple hover function but after doing that my slideup and slidedown animations weren't working.

推荐答案

尝试一下:

(function($){  

var nav = $("#topNav");  

nav.find("li").each(function() {  
if ($(this).find("ul").length > 0) {  

    //show subnav on hover  
    $(this).mouseover(function() {  
        $(this).find("ul").slideDown(300);  
    });  
    //hide submenus on exit  
    $(this).mouseleave(function() {  
        $(this).removeClass('active').find("ul").stop(true).slideUp(300);  
    });  
 }  
});

})(jQuery);

这篇关于jQuery下拉菜单闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！