CODEWITHSUNDEEP
jquerydrop-down-menu
nmford
nmford

Reputation: 151

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.

Upvotes: 2

Views: 3331

Answers (2)

jon_childs
jon_childs

Reputation: 675

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/

Upvotes: 0

Rayshawn
Rayshawn

Reputation: 2617

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

Upvotes: 2

Related Questions