jQuery - Mouseleave not firing

Question

Я пытаюсь ввести некоторую магию jQuery в горизонтальное раскрывающееся меню. On mouseover/mouseenter работает нормально, но mouseleave похоже не стреляет. У меня есть следующая скрипка, созданная здесь: http://jsfiddle.net/shalan/c28cU/8/.

При наведении курсора О, второй уровень предназначен исчезать и скользить вверх в поле зрения под О (что он делает), но на mouseleave она просто исчезает вместо выведении и сползать вниз одновременно.

Я пытаюсь устранить проблему, которая может быть проблемой, но у меня заканчиваются идеи. Если посмотреть на скрипку, указанным выше, вы увидите следующие строки CSS (строка 38 в панели CSS):

/* INITIAL STYLING FOR 2ND LEVEL UL CONTAINER */ 
nav ul li ul { 
    display:none; 
    position:absolute; 
    background:#777; 
    top:50px; 
} 

Теперь, если я закомментировать строку display:none;, то mouseleave делает работу, как ожидается, но будет очевидно, активируются, когда вы наведите указатель мыши на область ниже . Элемент списка. Я также пробовал разные методы JS, используя on(), hover() и bind() - последний, который не работает.

На этом этапе я не уверен, что это проблема JS или CSS. Я искренне буду признателен за любую помощь в этом отношении. Большое спасибо!

Answer 1

Эй здесь является рабочей скрипкой для вас

http://jsfiddle.net/Gkp34/

Я удалил CSS display: none; и вместо того, чтобы установить стиль block с JS на парения.

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

function usingOn() { 
    nav.on({ 
     mouseenter: function() { 
      $(this).find('ul').css('display','block').eq(0).stop(true, true).animate({ opacity:'1' , top: '40px' }, { duration:200, queue:false }); 
     }, 
     mouseleave: function() { 
      $(this).find('ul').eq(0).stop(true, true).animate({ opacity:'0' , top: '50px' }, { duration:300, queue:false, complete: function() { 
          // Animation complete. 
          $(this).css('display','none'); 
         } }); 
     } 
    }); 
} 

Это должно работать также для usingBind() или usingHover() функции.

Answer 2

использование MouseOut вместо MouseLeave, попробовать, что ...