jQuery/hover() /. mousemove() 최적화 문제

Question

사용자가 특정 섹션 위로 마우스를 가져 가면 모달이 마우스를 따라가는 기본 모달 예제에서 작업하고 있습니다.

왼쪽에서 오른쪽으로 갈 때, 모달이 상당히 지연되며 사용자가 특정 섹션 밖으로 마우스를 가져 가면 fadeOut() 세트가 트리거됩니다.

오른쪽에서 왼쪽으로 원활하게 작동합니다.

위도에서는 <nav> 위로 마우스를 움직일 때의 피로감을 관찰 할 수있을뿐 아니라 단단한 성능을 아래에서 위로 볼 수 있습니다.

모든 중복 질문이나 관련 기사가있는 경우 모두 올바른 방향으로 알려주십시오. 지금까지의 내 검색은 정보 제공의 문제 였지만이 특정 문제에 대해서는 매력을 느끼지 않았습니다.

여기 내 fiddle입니다.

언제나 프로 조언이 따뜻하게 환영받는 것처럼 모두에게 감사드립니다.

켄

Answer 1

문제는 이벤트 onmouseout JQuery와 화재가 당신이 "초점"얻는 모달 요소를 추가하고 이벤트가 당신의 탐색 요소에 발사하지 않는 마우스를 가져 가면이다. 나는 당신의 예제를 변경하여 지금은 훨씬 나아졌습니다. 체크 아웃하십시오. here

Answer 2

도움이 될만한 몇 가지 권장 사항.

// cache the jquery object 
var target = $('section#coming-soon'); 
target.hide(); 
// select the specific nav, not all navs 
$('nav:first').mouseenter(function(){ 
    // only need to show it once on enter 
    target.show(); 
}).mousemove(function(e) { 
    // can't really avoid this unless you want to keep moving it around all the time 
    // but show it only once you mouse over 
    target.css({ 
     'position' : 'absolute', 
     'top' : e.pageY, 
     'left' : e.pageX  
    }); 
}).mouseleave(function() { 
    target.fadeOut(1300); 
    }); 

Answer 3

Oh 멋진, 고전적인 예! 그런 식으로 스크립트 문제는 jQuery를 사용하면 마우스를 갖다 댄 아웃 한 당신이 section#coming-soon 터치 한 번 생각이다, 그래서 그것은 분명히이 fadeOut ...이 문제를 극복하기

한 가지 방법은 nav 내부의 section#coming-soon을 넣어하는 것입니다 실행 여기

<nav> 
    <ul> 
     <li><a>Home</a></li> 
     <br /> 
     <li><a>About</a></li> 
     <br /> 
     <li><a>My Work</a></li> 
     <br /> 
     <li><a>Blog</a></li> 
     <br /> 
     <li><a>Contact</a></li> 
    </ul> 
    <section id="coming-soon"> 
     <h2>Coming Soon!</h2> 
    </section> 
</nav> 

예 : 아직도 당신이 당신이 그것을 위에 마우스를 올려 경우에도 section#coming-soon 내부에 있다고 생각합니다 나는 당신의 최적화에 동의 http://jsfiddle.net/gcJuz/1/