jQuery dropdown menu flickering

问题

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

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.

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

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

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.

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.

回答1:

Try this:

(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);

回答2:

I had this problem and have found a solution: add delay(50) before slideUp(300). Checkout the new fiddle here: http://jsfiddle.net/LxL8Q/42/

来源：https://stackoverflow.com/questions/12749010/jquery-dropdown-menu-flickering