Question

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.

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