jQuery animate near mouse

Question

나는 네비게이션 메뉴가 브라우저의 위쪽에서 아래로 내려갈 때 마우스가 그 근처의 영역으로 들어가고 마우스가 메뉴를 떠날 때 사라지는 방법을 찾고있다.

나는 this 질문 덕분에 더 가까이에 있습니다.

내가 가진 문제는 애니메이션 때문입니다. 그것은 매우 이상하게 행동하고 있습니다. 나는 JsFiddle에서 내 코드를 에뮬레이션했습니다.

http://jsfiddle.net/tVreF/2/

잠시 기다린 후 페이지의 주위에 당신의 마우스를 이동, 등등 창 크기를 조정 시도하고 결국은 애니메이션. 분명히 이것은 의도 된 방식이 아닙니다.

이 조언이 올바른 방법 일지 모르겠다면 어떤 조언을 주시면 감사하겠습니다.

편집 : 혼란을 없애기 위해 탐색 메뉴가 처음에는 나타나지 않고 마우스가 화면 상단 가까이에 있으면 전체 메뉴 자체가 아래로 움직입니다. Windows 작업 표시 줄을 "자동 숨기기"로 설정하면 어떤 일이 벌어 지는지 알 수 있습니다.

Answer 1

내가 한 것은 접근 방식을 변경했습니다. 나는이 바이올린의 이벤트 포수 사업부를 만든 :

http://jsfiddle.net/L2J5X/2/

마우스가 DIV 메뉴가 밖으로 애니메이션 밖으로 이동할 때, 메뉴에서 애니메이션 div에 걸쳐 마우스가 올 때 이벤트 핸들러를 추가했다.

function dothething(amover) 
    { 
    if(amover) 
     { 
      $(".nav").animate({top: '0px'}, 200, "linear");  
     } 
     else 
     { 
      window.setTimeout(function(){if(!$amthere){ 
      $(".nav").animate({top: '-40px'}, 200, "linear");   
      }},100); 
     } 
    } 
     $("#detect").mouseover(function(){dothething(true);}); 
     $("#detect").mouseout(function(){dothething(false);}); 
$("#mainNav").mouseover(function(){$amthere=true;}); 
$("#mainNav").mouseout(function(){$amthere=false;}); 
$amthere = false; 
​ 

div는 이벤트가 항상 포착되도록 최상위 Z- 색인으로 절대적으로 배치됩니다. 다른 div가 무작위로 배치 될 때 상관없이 (위대한 녹색 블록 참조).

희망이 조금 도움이됩니다.

* EDIT *

추가 메뉴로 포수 사업부에서 갈 때 숨어을 방지하기 위해 잠시. 이것이 메뉴에 있는지 아닌지를보기위한 $ amthere 변수입니다. 그런 다음 100ms 지연 검사를 통해 실제 마우스 출력을 수행 할 수 있다면 좋으며 아무것도하지 않을 경우 숨김 메뉴를 숨기십시오.

Answer 2

http://sperling.com/examples/menuh/
시도해보십시오. 당신은 순수한 CSS를 사용하여 애니메이션 수 ...?

이것은 당신이 필요로하는 솔루션이 아닐 수 있지만, 당신은 탐색의 폭을 만들 수있는이 상황에서 더 나은 대안
편집
인 20 픽셀 및 쓰기로 (당신은에 IsNear 기능을 썼다) 항상 onhover on body on 항상 몸을 검사하기보다는