如何使Jquery事件僅執行最近觸發​​的事件

Question

因此，我獲得了一個導航欄，它幾乎可以完美運行。 導航選項卡下面有一個小矩形，該欄將位於用戶當前懸停的選項卡下。 我遇到的問題是，該欄將轉到每次一次懸停在每個選項卡上的每個選項卡，而不是僅轉到當前懸停或以前懸停的那個選項卡。 如果那沒有意義，那么請查看完整的代碼，以了解我的意思。 感謝您的時間。

<div id='backNav'>
    <div id='navBar'>
      <div id='navLoc'></div>
    </div>
    <div id='cont'>
      <ul id='navList'>
        <li id='home' class='navItem'>Home</li>
        <li id='about' class='navItem'>About</li>
        <li id='shop' class='navItem'>Shop</li>
        <li id='blog' class='navItem'>Blog</li>
      </ul>
    </div>
  </div>

---

var main = function() {
  var navLoc = $('#navLoc');

  $('#home').hover(function(){
    navLoc.animate({
      left:75
    },300 )
  });

  $('#about').hover(function(){
    navLoc.animate({
      left:243
    },300 )
  });

  $('#shop').hover(function(){
    navLoc.animate({
      left:415
    },300 )
  });

  $('#blog').hover(function(){
    navLoc.animate({
      left:575
    },300 )
  });
}

$(document).ready(main);

完整代碼： https ： //jsfiddle.net/tjqLbne1/
（由於窗口大小的原因，條形圖未正確地排列在選項卡下，但您仍然可以理解）

Answer 1

在這種情況下，您想清除隊列，請嘗試clearQeue。

navLoc.clearQueue().stop();
navLoc.animate({
  left:75
},300 )

https://jsfiddle.net/qvohfs3w/

從文檔

您可能希望采用幾種方法來處理que的結尾，下面的鏈接會更詳細地說明。

jQuery“完成”文檔