悬停/鼠标事件反复触发jQuery UI的“动画”

问题描述

| 因此，我进行了导航，并使用jQuery \的UI进行动画处理，以使列表项滑出视图，更改颜色，然后向上滑动，以另一种颜色显示按钮。 我遇到的问题是，每当我将鼠标悬停在列表项上时，就会连续触发悬停事件，直到鼠标离开为止。 甚至更奇怪的是，似乎mouseleave事件在悬停事件之后立即触发，而不管鼠标是否实际上离开了列表项。无论我使用悬停还是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\"},\'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事件触发无济于事之后才使用有条件的条件来运行动画。 任何建议将不胜感激，最好是在我秃顶之前。 谢谢！     

解决方法

问题的原因是您正在移动元素，因此它不再位于鼠标下方。因此显然obviously3ѭ被触发。您可以通过在

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,function(){
            $li.css({\'background\':\'white\',\'color\':\'#333\'});
        });
    $li.animate({bottom:\"-0px\"},\"fast\");
});

您可能已经注意到，动画完成后触发的回调函数已经过优化。您可以通过以下方式传递多个CSS属性：

.css({\'prop1\':\'val1\',\'prop2\':val2\'})

另外，我已经优化了代码，因此您不会生成很多jQuery对象，因为这很慢。 （注意

var $li

行。）     ,尝试将您的

li

设置为

position: relative;

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

<li>

结果有点有趣。 看到这里：http://jsfiddle.net/aN4g4/47/