Question

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

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

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

这就是我所拥有的： 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/

Hover / mouseenter事件重复触发jQuery UI的'animate'

2 个答案: