如何在此代碼塊上模擬hoverIntent？

Question

我在previous topic中也有提問，但有人說我應該爲此打開另一個。所以在這裏：

我在動畫背後的導航功能，問題是我想保持在前一個地方的動畫元素，而不是回到起始位置，並回到下一個元素。我能夠實現這一點，但沒有使用hoverIntent。所以現在，功能區將會在導航中拾取每一個動作。我怎樣才能防止這一點？

糾正我，如果我錯了，但延遲（）和setTimeout（）在這一點上沒有意義，因爲他們會啓動最後一個動畫，無論停止。如果鼠標剛剛通過，我怎樣才能防止mouseenter發射？可能是鼠標懸停的if子句，如果鼠標在懸停塊上的穩定時間超過300 ms？

注：我正在運行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以適應。