jquery - 停止 jquery 扩展菜单“振荡”

Question

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

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

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

这是我遇到问题的网站

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

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

谢谢！

Answer 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是否会导致您出现问题。尝试不使用它，看看它是否有帮助？