jQuery在动画或slideUp/slideDown中使用stop()时的高度

jQuery在动画或slideUp/slideDown中使用stop()时的高度,jquery,jquery-animate,slidetoggle,Jquery,Jquery Animate,Slidetoggle,我有一个带有隐藏子菜单的菜单 我正在设置子菜单的动画,使其在鼠标悬停在菜单项上时打开,在鼠标悬停时关闭 当用户将鼠标悬停在许多菜单项上时,所有动画都会排队 为了解决排队问题,我在动画之前添加了一个stop() 这导致了一个更严重的问题,子菜单的高度降低到我鼠标离开时的大小。为什么不使用切换功能? 我认为您必须将ul元件的高度设置回原始高度。 此时,“高度”保留在“样式”属性中,因此您的ul仅具有将鼠标移出元素的高度。您可以存储一个变量来存储菜单是否打开 当您将鼠标悬停在上方并打开菜单时,设置va

我有一个带有隐藏子菜单的菜单

我正在设置子菜单的动画,使其在鼠标悬停在菜单项上时打开,在鼠标悬停时关闭

当用户将鼠标悬停在许多菜单项上时,所有动画都会排队

为了解决排队问题,我在动画之前添加了一个stop()


这导致了一个更严重的问题,子菜单的高度降低到我鼠标离开时的大小。

为什么不使用切换功能? 我认为您必须将ul元件的高度设置回原始高度。
此时,“高度”保留在“样式”属性中,因此您的ul仅具有将鼠标移出元素的高度。

您可以存储一个变量来存储菜单是否打开

当您将鼠标悬停在上方并打开菜单时,设置
var menuOpening=true
然后对打开的动画进行回调,该动画设置
menuOpening=false然后可以检查菜单是否打开,如果为false,则仅打开一个新菜单项


然后你可以玩这个,得到一些看起来更好的东西。我以前也做过类似的工作,但找不到代码。

通过在关闭动画完成后将高度设置为“自动”来解决问题

function leftMenuOut() {
    var obj = $(this).find(".toggleThisLevel2");
    if (obj.length == 0) {
        return true;
    }
    $(this).removeClass("opened");
    obj.stop().animate({ height: "hide" }, { queue: false, complete: function() { $(this).css("height", "auto"); } });
    return false;
}

如果在要隐藏的元素上有一个填充,您将体验到填充也会收缩。只需在其周围添加一个包含元素,并更改其高度,但不要添加任何填充或边距

这是一个在jQuery 1.7.2中已经修复的bug:

自从我通过Google发现这个问题,并且这些修复对我都不起作用,我应该提到我是如何修复我的问题的

这是我的原始代码:

elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar + ")").stop().slideDown();
这导致在快速来回切换时高度被切断

然后,我在向下滑动的
.stop()
之后添加了
.hide()

elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar  + ")").stop().hide().slideDown();
现在高度不会反弹,也不会被切断。希望这对将来的人有帮助