Mega drop down menu onhover flickering

问题

I've got a problem with a mega drop down menu that I found online. It is perfect for my purpose but it acts weird sometimes and it has a flickering and flashing problem. The link where I found it is here: http://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel . The author already knows that problem, but essentially it could work just fine for mobile if it will be hide. On desktop version I think is a really good idea and I'm using on a website that I build: http://napoleon.larchedigitalmedia.com/.

The problem as I told you before is the flirking and I guess that the problem is here in jquery:

$(".dropdown").hover(            
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
      $(this).toggleClass('open');        
    },
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
      $(this).toggleClass('open');       
    });

I don't understand if it is a bootstrap problem (bootstrap use mostly an onclick event for the mega drop down menu) or the problem is in this snippet. Essentially the class open is added (toggle) too fast to a div and sometimes it is applied to two divs at the same times. Could anyone help me to fix this problem?

回答1:

As far as I can see, in your project, the animation doesn't have time to finish and JS is trying to animate both at the same time. I just changed a little bit of your code and the flickering stops.

$(".dropdown").hover(            
function() {
  $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
  $(this).toggleClass('open');        
},
function() {
  $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideUp("400");
  $(this).toggleClass('open');       
});

Just by changing the second parameter of the stop() function, the animation executes itself. If you want more info, there is always the Jquery documentation on the fuction.

回答2:

This occurs due to hover event. Just change the hover event to mouseenter and mouseleave to resolve this problem.

Change this

   $(".dropdown").hover(            
       // content here
   );

$(".dropdown").mouseenter(            
  function() {
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
    $(this).toggleClass('open');        
  },
);

$(".dropdown").mouseleave(            
  function() {
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
    $(this).toggleClass('open');        
  },
);

Hope this will help!

来源：https://stackoverflow.com/questions/38269369/mega-drop-down-menu-onhover-flickering