Javascript菜单悬停动作：不会停止级联

Question

以下是我所谈论的网站：http://benjaminpotter.org/clients/c3carlingford/

---

所以当我将鼠标悬停在菜单项上时，我正在构建一个弹出窗口的菜单：

所以我写了一个javascript（jQuery）函数来动画它：

$(".info").css({"opacity": "0", "margin-top": "10px"}).hide(0);

$("#menu-item-51").mouseenter(function(){

    $(".nav1").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-51").mouseleave(function(){

    $(".nav1").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-11").mouseenter(function(){

    $(".nav2").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-11").mouseleave(function(){

    $(".nav2").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-12").mouseenter(function(){

    $(".nav3").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-12").mouseleave(function(){

    $(".nav3").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-13").mouseenter(function(){

    $(".nav4").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-13").mouseleave(function(){

    $(".nav4").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-14").mouseenter(function(){

    $(".nav5").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-14").mouseleave(function(){

    $(".nav5").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-15").mouseenter(function(){

    $(".nav6").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-15").mouseleave(function(){

    $(".nav6").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

首先，问题是它有很多代码......但是它有效......

那么问题是什么？

问题在于：

当你向后鼠标移动并在所有链接上第四个时，它会级联。很酷我知道，但客户不喜欢它。我也不是。

那么如何更改它以使其表现更好？

我希望它像这样工作：

他们的下拉菜单不一样：鼠标悬停在全部，级联的东西......

您可以在此处查看他们的网站：http://thecity.org/

Answer 1

在mouseleave事件中，我将使用jQuery中的.hide()方法。 我只是假设你想在离开menuitem之后隐藏元素？

我做了一个快速小提琴来说明问题。 Click here for results

祝你好运！

Answer 2

尝试在代码中的所有位置将stop(0)更改为stop(true, true)。它应该按预期工作。

将true作为stop方法的参数传递，确保它清除以前动画的队列，并且如果它们仍然是动画，也会强制完成它们。

stop(clearQueue, jumpToEnd) - 停止匹配元素上当前正在运行的动画。