jQuery : FadeIn/FadeOut 타이밍 문제

Question

내가 관리하고있는 사이트에서 사용자가 장르를 선택할 수 있도록 아래 드롭 목록을 클릭하면 사라지는이 스타일 링크가 있습니다.

완벽하게 작동하는 페이드가 있습니다. 내가 실행중인 문제는 드롭 다운 목록에 마우스를 올려 놓았는지 여부를 결정하려고 시도하기 때문에 사용자가 스타일 입력 링크를 클릭하지 않고 스타일 링크를 숨기면 숨길 수 있습니다. 드롭 다운 목록.

드롭 다운 목록이 사라지고 사용자가 드롭 다운 요소를 입력하지 않으면 사용자가 드롭 다운 요소를 입력하면 요소가 페이드 아웃됩니다 (클릭 된 링크를 떠나면서 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

구조는 매우 문제가 : 여기

내가 지금까지 가지고있는 코드입니다. 왜 마우스를 놓을 때 리스너를 추가합니까? 당신이 할 수

가장 좋은 것은

• 가의 setTimeout을 사용하여 ~ 300-400ms 지연() 페이드 실제 드롭 다운을 설정
• 와 mouseenter에하는 MouseLeave에
• 설정 페이드 아웃을 표시 할 fadein을 설정입니다 (즉 : stop (true, true) .fadeIn (200)), 이벤트 처리기 내에서 발생하기 전에 clearTimeout()을 사용하십시오.
• mouseleave에서 실제 드롭 다운을 fadeout으로 설정합니다.

사실 이러한 모든 애니메이션 전에 stop (true, true)을 사용해야합니다.

이 논리는 사용자가 드롭 다운 위로 마우스를 가져 가면 드롭 다운이 자체적으로 사라져서 대기열에있는 페이드 아웃을 취소한다는 것을 의미합니다 (추가 200-300 초 타이머 추가).

그것을 할 수있는 또 다른 방법은 드롭 다운 내부에 공중 선회하는 동안, 그것은