如何使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

在这种情况下，您要清除que，尝试clearQeue。

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

https://jsfiddle.net/qvohfs3w/

从文档

您可能希望通过几种方式处理que的结尾，下面的链接会详细说明。

JQuery "Finish" Docs