jQuery / hover () /. mousemove () проблема оптимизации

Question

Я работаю над базовым модальным примером, в котором модал будет следовать за курсором мыши, пока пользователь наводит указатель мыши на определенный участок.

Проблема, с которой я сталкиваюсь, заключается в том, что при переходе слева направо модальный режим значительно отстает, а также запускает набор fadeOut (), если пользователь должен был вывести курсор мыши из определенного раздела.

Справа налево, работает без проблем.

В скрипке вы можете наблюдать отставание при наведении курсора мыши на <nav> сверху вниз, а также замечать хорошую производительность снизу вверх.

Если есть какие-либо дублирующие вопросы или связанные статьи, о которых вы все знаете, пожалуйста, укажите мне правильное направление. Мои поиски до сих пор носили информационный характер, но не касались этой конкретной проблемы.

Вот моя скрипка .

Спасибо всем, как всегда, про советы горячо приветствуются.

Ken

Answer 1

Проблема в том, что jquery запускает событие onmouseout, когда вы добавляете модальный элемент, он получает «фокус», и события hover не запускаются на вашем элементе nav.Я изменил ваш пример, чтобы он работал намного лучше, посмотрите здесь

Answer 2

О, классный пример!Проблема в том, что jQuery думает, что вы отключили звук после прикосновения к section#coming-soon, поэтому он явно запускает fadeOut ...

Один из способов преодолеть это - поставить section#coming-soonвнутри 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>

Пример здесь: 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);
  });