jQuery: проблемы с временным временем FadeIn/FadeOut

Question

На сайте, с которым я управляю, у меня есть эта стилизованная ссылка, которая на клике исчезает в списке ниже, чтобы пользователь мог выбрать жанр.

У меня есть Fade в работе отлично, проблема, с которой я сталкиваюсь, пытается определить, был ли падающий список навешенным, чтобы я мог скрыть его, если пользователь зависает от стилизованной ссылки без ввода выпадающий список.

Итак, выпадающий список Затухает, пользователь не вводит элемент с раскрывающимся списком, тогда элемент исчезает, однако, если пользователь вводит элемент с раскрывающимся списком (оставляя связанный щелчок, запускающий fadein), то выпадение должно оставаться показом до тех пор, пока не покинет ниспадающий элемент.

Вот код, который я до сих пор:

$('#categories_link').live('click mouseleave', function(e){ 
    $('.categories').fadeIn(200, function(){ 
     $(this).live('mouseenter mouseleave', function(evnt){ 
      switch(evnt.type) { 
       case "mouseenter": 
        $(this).stop(true, true) 
        $(this).data('visible', true) 
       break; 

       case "mouseleave": 
        $(this).data('visible', false) 
       break; 
      } 
     }) 

     if(e.type == 'mouseleave') { 
      if($('.categories').data('visible')) 
       return; 
      else 
       $('.categories').fadeOut(200) 
     } 
    }) 
}) 

Answer 1

Структура весьма проблематично. Почему вы добавляете слушателей в мышь?

Лучшее, что вы можете сделать, это

• установить FadeIn появляться на MouseEnter
• множество FadeOut на MouseLeave с микросхемой ~ 300-400ms задержки с использованием SetTimeout()
• установить фактическое ниспадающее меню, чтобы исчезнуть (в том числе: stop (true, true) .fadeIn (200), но использовать clearTimeout(), прежде чем это произойдет внутри обработчика событий.
• установить фактическое выпадающее меню для затухания на мышечном плече

На самом деле вы должны использовать остановку (true, true) перед всеми этими анимациями.

Логика этого заключается в том, что если пользователь наводится над выпадающим списком, выпадающее меню будет пытаться затухать, отменяя тем самым фазе, которая поставлена ​​в очередь (вы добавили дополнительный таймер 200-300 секунд).

Другим способом сделать это, это гнездо раскрывающегося внутри родительского тега, так что пока вы парили в раскрывающемся списке, он не исчезнет в любом случае (это также работает с чистым CSS)