jQuery/hover（）/。mousemove（）最適化の問題

Question

私は、ユーザーが特定のセクション上にマウスカーソルを置いている限り、モーダルがマウスカーソルの後に続く基本的なモーダルの例に取り組んでいます。

左から右に行くと、モーダルが大幅に遅れ、ユーザーが特定のセクションからマウスを離した場合にfadeOut（）がトリガーされます。

右から左へ、シームレスに動作します。

<nav>の上にマウスを移動したときのフィーリングと、下から上への堅実なパフォーマンスに気付くことができます。

あなたが知っている重複した質問や関連記事がある場合は、正しい方向に私を指摘してください。これまでの私の検索は情報提供されていますが、この特定の問題には訴えていません。

ここは私のfiddleです。

ありがとうございました。いつものように、プロのアドバイスは熱心に歓迎されています。

ケン

Answer 1

問題は、モーダル要素を追加したときにイベントれるonmouseout jQueryの火災は、それが「フォーカス」を取得し、イベントがあなたのnav要素に発射されていない置くことです。 私はあなたの例を変更して、現在ははるかに良くなっていることを確認してください。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のは、あなたがmousedを出してきたあなたは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/