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

Posted 2023-05-08

【中文标题】Hover/mouseenter 事件反复触发 jQuery UI 的“动画”

【英文标题】：Hover/mouseenter event triggers jQuery UI's 'animate' repetitively

【发布时间】：2011-08-31 21:52:35

【问题描述】：

所以我有一个导航，我正在使用 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 事件触发无济于事后使用条件运行动画。

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

【参考方案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 行。）

【讨论】：

完美！太感谢了。另外，感谢您优化这些代码（总是很好地了解最佳实践）。先生，您成就了我的一天！

【参考方案2】：

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

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

结果有点搞笑。

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

【讨论】：

感谢您的建议！虽然 nav li 已经设置为相对。我会将当前的 CSS 添加到我的编辑中。

不。看看演示。

演示肯定表现得很奇怪。这里有一些额外的样式：jsfiddle.net/aN4g4/49。我的主要问题是无论鼠标是否离开按钮都会触发悬停事件，因此如果鼠标移动，按钮会不断上下移动。