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

弗朗的文档

有您可能希望处理阙结局的几种方法，下面的链接，更详细地解释。

JQuery "Finish" Docs