因此，我获得了一个导航栏，它几乎可以完美运行。导航选项卡下面有一个小矩形，该栏将位于用户当前悬停的选项卡下。我遇到的问题是，该栏将转到每次一次悬停在每个选项卡上的每个选项卡，而不是仅转到当前悬停或最近被悬停的那个选项卡。如果那没有意义，那么请查看完整的代码，以了解我的意思。感谢您的时间。
<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/
（由于窗口大小的小提琴，条形图未正确地排列在选项卡下，但您仍然可以理解）
在这种情况下，您想清除队列，请尝试clearQeue。
navLoc.clearQueue().stop();
navLoc.animate({
left:75
},300 )
https://jsfiddle.net/qvohfs3w/
从文档
您可能希望通过几种方法来处理que的结尾，下面的链接会更详细地说明。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句