如何解决悬停/鼠标事件反复触发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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。