Мега выпадающее меню при мерцании

Question

У меня проблема с мега выпадающим меню, которое я нашел в Интернете. Это идеально подходит для моих целей, но иногда действует странно и имеет проблему с мерцанием и миганием. Ссылка, где я ее нашел, находится здесь: http://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel. Автор уже знает эту проблему, но, по сути, она может отлично работать на мобильных устройствах, если она будет скрыта. Для настольной версии я думаю, что это действительно хорошая идея, и я использую на веб-сайте, который я создаю: http://napoleon.larchedigitalmedia.com/.

Проблема, как я говорил вам ранее, это флирт, и я думаю, что проблема здесь в 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');       
    });

Я не понимаю, является ли это проблемой начальной загрузки (в начальной загрузке в основном используется событие onclick для мега-выпадающего меню) или проблема в этом фрагменте. По существу, класс open слишком быстро добавляется (переключается) в div, а иногда он применяется к двум div одновременно. Может ли кто-нибудь помочь мне решить эту проблему?

Answer 1

Насколько я вижу, в вашем проекте анимация не успевает закончиться, и JS пытается анимировать оба одновременно. Я просто немного изменил твой код, и мерцание прекратилось.

$(".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');       
});

Просто изменив второй параметр stop() функция, анимация выполняется сама. Если вам нужна дополнительная информация, всегда есть документация по Jquery.

Answer 2

Это происходит из-за hover событие. Просто измените hover событие в mouseenter а также mouseleave решить эту проблему.

Изменить это

   $(".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');        
  },
);

Надеюсь, это поможет!