Как я могу имитировать hoverIntent на этом блоке кода?

Question

Я спросил то же самое в previous topic, но кто-то сказал, что я должен открыть другое для этого. Итак, вот он:

Я анимация ленты за навигацией, и проблема в том, что я хочу сохранить анимированный элемент в предыдущем месте вместо того, чтобы возвращаться в исходное положение и возвращаться к следующему элементу. Я смог добиться этого, но без использования hoverIntent. Итак, теперь лента забирает каждое движение по навигации. Как я могу это предотвратить?

Исправьте меня, если я ошибаюсь, но delay() и setTimeout() на данный момент не имеют смысла, поскольку они будут запускать последнюю анимацию независимо от остановок. Как я могу предотвратить запуск mouseenter, если мышь просто проходит? Может быть, предложение if на мыши, как если бы мышь стабильна на парящем блоке более 300 мс?

Примечание: У меня есть сценарий noConflict, поэтому j = $.

function rbHover(){ 


    j("#nav li a") 
     .on('mouseenter', function() { 

     var l = j(this).parent().position().left; 
     var w = j(this).parent().width(); 
     var rbw = Math.round(w/4); 
     var rbh = Math.round(w/16); 

      j("#ribbon").stop('ribbon', true, true).animate({ 
       "left" : l, 
       "width" : w }, { 
        duration: 600, 
        easing: 'swing', 
        queue: 'ribbon' 
       }).dequeue('ribbon'); 

      j(".rib-left").stop('rib-left', true, true).animate({ 
       "border-right-width": rbw, 
       "border-left-width": rbw, 
       "border-top-width": rbh, 
       "border-bottom-width": rbh, 
       "bottom": "-" + (2*rbh) + "px"}, { 
        duration:600, 
        easing: 'linear', 
        queue: 'rib-left' 
       }).dequeue('rib-left'); 

      j(".rib-right").stop('rib-right', true, true).animate({ 
       "border-right-width": rbw, 
       "border-left-width": rbw, 
       "border-top-width": rbh, 
       "border-bottom-width": rbh, 
       "bottom": "-" + (2*rbh) + "px"}, { 
        duration:600, 
        easing: 'linear', 
        queue: 'rib-right' 
       }).dequeue('rib-right'); 
     }) 

     .on('mouseleave', function() { 

     var l = j(".active").parent().position().left; 
     var w = j(".active").parent().width(); 
     var rbw = Math.round(w/4); 
     var rbh = Math.round(w/16); 

      j("#ribbon").stop('ribbon', true).delay(300, 'ribbon').animate({ 
       "left" : l, 
       "width" : w }, { 
        duration: 600, 
        easing: 'swing', 
        queue: 'ribbon' 
       }).dequeue('ribbon'); 

      j(".rib-left").stop('rib-left', true, true).delay(300, 'rib-left').animate({ 
       "border-right-width": rbw, 
       "border-left-width": rbw, 
       "border-top-width": rbh, 
       "border-bottom-width": rbh, 
       "bottom": "-" + (2*rbh) + "px"}, { 
        duration:600, 
        easing: 'linear', 
        queue: 'rib-left' 
       }).dequeue('rib-left'); 

      j(".rib-right").stop('rib-right', true, true).delay(300, 'rib-right').animate({ 
       "border-right-width": rbw, 
       "border-left-width": rbw, 
       "border-top-width": rbh, 
       "border-bottom-width": rbh, 
       "bottom": "-" + (2*rbh) + "px"}, { 
        duration:600, 
        easing: 'linear', 
        queue: 'rib-right' 
       }).dequeue('rib-right'); 
     }); 
} 

Вы можете найти свой веб-сайт по адресу: www.egegorgulu.com

Answer 1

Попробуйте это ...

function rbHover(){ 
    var timeoutID = 0; 
    var hoverInterval = 300; 

    j("#nav li a") 
     .on('mouseenter', function() { 
      clearTimeout(timeoutID); 
      timeoutID = setTimeout(mouseEnter, hoverInterval, this); 
     }) 
     .on('mouseleave', function() { 
      clearTimeout(timeoutID); 
      timeoutID = setTimeout(mouseLeave, hoverInterval); 
     }); 

    function mouseEnter(el) { 
     var l = j(el).parent().position().left; 
     var w = j(el).parent().width(); 
     var rbw = Math.round(w/4); 
     var rbh = Math.round(w/16); 

     j("#ribbon").animate({ 
      "left" : l, 
      "width" : w }, { 
      duration: 600, 
      easing: 'swing', 
      queue: 'ribbon' 
     }).dequeue('ribbon'); 

     j(".rib-left").stop().animate({ 
      "border-right-width": rbw, 
      "border-left-width": rbw, 
      "border-top-width": rbh, 
      "border-bottom-width": rbh, 
      "bottom": "-" + (2*rbh) + "px"}, { 
       duration:600, 
       easing: 'linear', 
       queue: 'rib-left' 
      }).dequeue('rib-left'); 

     j(".rib-right").stop().animate({ 
      "border-right-width": rbw, 
      "border-left-width": rbw, 
      "border-top-width": rbh, 
      "border-bottom-width": rbh, 
      "bottom": "-" + (2*rbh) + "px"}, { 
       duration:600, 
       easing: 'linear', 
       queue: 'rib-right' 
      }).dequeue('rib-right'); 
    } 

    function mouseLeave() { 
     var l = j(".active").parent().position().left; 
     var w = j(".active").parent().width(); 
     var rbw = Math.round(w/4); 
     var rbh = Math.round(w/16); 

     j("#ribbon").stop('ribbon', true).animate({ 
      "left" : l, 
      "width" : w }, { 
      duration: 600, 
      easing: 'swing', 
      queue: 'ribbon' 
     }).dequeue('ribbon'); 

     j(".rib-left").stop('rib-left', true, true).animate({ 
      "border-right-width": rbw, 
      "border-left-width": rbw, 
      "border-top-width": rbh, 
      "border-bottom-width": rbh, 
      "bottom": "-" + (2*rbh) + "px"}, { 
       duration:600, 
       easing: 'linear', 
       queue: 'rib-left' 
      }).dequeue('rib-left'); 

     j(".rib-right").stop('rib-right', true, true).animate({ 
      "border-right-width": rbw, 
      "border-left-width": rbw, 
      "border-top-width": rbh, 
      "border-bottom-width": rbh, 
      "bottom": "-" + (2*rbh) + "px"}, { 
       duration:600, 
       easing: 'linear', 
       queue: 'rib-right' 
      }).dequeue('rib-right'); 
    } 
} 

Я только добавил интервал события MouseEnter так ждет перед стрельбой - сменить hoverInterval на костюм.