Hover/mouseenter 事件反复触发 jQuery UI 的“动画”

Question

所以我有一个导航，我正在使用 jQuery 的 UI 动画来让列表项向下滑出视图，更改颜色，然后再向上滑动，以不同的颜色显示按钮。

我遇到的问题是，每当我将鼠标悬停在列表项上时，就会不断触发悬停事件，直到鼠标离开为止。

更奇怪的是，mouseleave 事件似乎在悬停事件之后立即触发，而不管鼠标是否实际离开了列表项。无论我使用 hover 还是 mouseenter，都会发生这种情况。

这是我所拥有的： HTML：

<nav>
    <ul>
        <a href="index.html"><li>Home</li></a>
        <a href="services.html"><li>Services</li></a>
        <a href="portfolio.html"><li>Portfolio</li></a>
        <a href="contact.php"><li>Contact</li></a>
        <a href="about.html"><li>About</li></a>
    </ul>
</nav>

jQuery:

$("nav li").mouseenter(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','orange');$(this).css('color','#fff');});
        $(this).animate({bottom:"-0px"},"fast");
    }).mouseleave(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','white');$(this).css('color','#333');});
        $(this).animate({bottom:"-0px"},"fast");
    });

CSS：

nav{
float:right;
margin-top:91px;
}
nav ul, nav ul li{
display:inline;
}
nav li{
margin-left:10px;
position:relative;
padding:5px 20px;
color:#A29874;
background-color:#fff;
border-top-right-radius:5px;
border-top-left-radius:5px;
 }

nav a{
position:relative;
text-decoration:none;
 }

如果我非常缓慢地将鼠标移到列表项之一，我可以达到我想要的效果，里面只有几个像素。这项似乎应该相对容易的任务让我发疯了。

我已经在网上搜索并尝试过诸如取消绑定 mouseenter 事件，仅在 mouseleave 事件触发无济于事后使用条件运行动画。

任何建议都将不胜感激，最好是在我秃顶之前。 谢谢！

Answer 1

问题的原因是您正在移动元素，使其不再位于鼠标下方。因此显然mouseleave() 被触发。您可以通过在 a 标签的悬停时触发动画来避免这种情况，但使用动画定位 li。见：http://jsfiddle.net/aN4g4/50/

这是你的新 js：

$("nav a").mouseenter(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'orange','color':'#fff'});
        });
    $li.stop(true,true).animate({bottom:"-0px"},"fast");
}).mouseleave(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'white','color':'#333'});
        });
    $li.animate({bottom:"-0px"},"fast");
});

您可能已经注意到在动画完成后触发的回调函数已经进行了一些优化。您可以通过这种方式传递多个 CSS 属性：.css({'prop1':'val1','prop2':val2'}) 另外，我已经优化了代码，因此您不会生成大量 jQuery 对象，因为这很慢。 （注意var $li 行。）

Answer 2

尝试将您的li 设置为position: relative;

我只是“粘贴”您的代码并设置相对于您的代码<li>

结果有点搞笑。

请看这里： http://jsfiddle.net/aN4g4/47/