如何使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“完成”文档