停止jquery扩展菜单'振荡'

时间:2012-07-28 10:33:53

标签: jquery html animation drop-down-menu

我已经在jquery中构建了一个扩展菜单,但是当我快速滚入和退出菜单多次时菜单会振荡并且在鼠标滚出菜单后保持动画打开和关闭烦人。这是我打开菜单的代码,非常简单。

$("#links").mouseenter(function(){
    $("#linksBody").slideDown(600, "easeOutExpo");
});

$("#links").mouseleave(function(){
    $("#linksBody" ).slideUp(600, "easeOutExpo");
});

这是我遇到麻烦的网站

http://www.pegbarandgrill.com/blog/

它的链接&目录菜单在右边。有谁知道解决这个振荡问题的最佳方法。

谢谢!

1 个答案:

答案 0 :(得分:1)

试试这个:

$("#links").mouseenter(function(){
    $("#linksBody").stop(1).slideDown(600, "easeOutExpo");
});

$("#links").mouseleave(function(){
    $("#linksBody" ).stop(1).slideUp(600, "easeOutExpo");
});

另一种解决方案是使用像hoverIntent

这样的插件

此外,您可以使用.hover()并简化以下内容:

$("#links").hover(function(){
    $("#linksBody").stop(1).slideDown(600, "easeOutExpo");
},
  function(){
    $("#linksBody").stop(1).slideUp(600, "easeOutExpo");
});

我也想知道easeOutExpo是否会引起你的问题。尝试没有它,看看它是否有帮助?