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

【问题标题】：Javascript menu hover action: wont stop cascadingJavascript菜单悬停动作：不会停止级联
【发布时间】：2012-02-18 06:21:41
【问题描述】：

这里是我说的网站：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/

【问题讨论】：

标签： jquery drop-down-menu menubar cascadingdropdown

【解决方案1】：

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

将true 作为stop 方法的两个参数传递可以确保它清除先前动画的队列，并且如果它们仍在动画中，也可以强制快速完成它们。

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

【讨论】：

【解决方案2】：

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

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

祝你好运！

【讨论】：