jQuery /hover()/.mousemove() 优化问题

Question

我正在研究一个基本的模式示例，其中只要用户将鼠标悬停在某个部分上，模式就会跟随鼠标光标。

我遇到的问题是，当从左向右移动时，模式会显着滞后，并且如果用户将鼠标移出特定部分，还会触发 fadeOut() 设置。

从右到左，无缝工作。

在小提琴中，您可以观察到将鼠标从上到下移动到

上时的滞后情况，以及从下到上的稳定性能。

如果有任何重复的问题或你们都知道的相关文章，请给我指出正确的方向。到目前为止，我的搜索仅供参考，但尚未解决这个具体问题。

这是我的小提琴。

谢谢大家，一如既往地热烈欢迎专业人士的建议。

肯

Answer 1

问题是，当您添加模态元素时，jquery 会触发 onmouseout 事件，它会获得“焦点”，并且悬停事件不会在您的导航元素上触发。
我更改了您的示例，使其现在工作得更好，请查看此处

Answer 2

哦，太棒了，经典的例子！问题在于，一旦您触摸 section#coming-soon，jQuery 就会认为您已将鼠标移出，因此它显然会运行 fadeOut...

一种克服方法这是为了将 section#coming-soon 放入 nav 中，这样脚本仍会认为您位于 section#coming-soon 内code>，即使您将鼠标悬停在其上：

<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>

示例如下：http://jsfiddle.net/gcJuz/1/

Answer 3

只需提供一些建议即可提供帮助。

// 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);
  });