2

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

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

4

2 回答 2

2

出现问题的原因是您正在移动元素，因此它不再位于鼠标下方。因此显然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条线。）

于 2011-05-24T13:26:08.060 回答
0

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

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

结果有点好笑。

见这里：http: //jsfiddle.net/aN4g4/47/

于 2011-05-24T13:07:52.393 回答