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

【问题标题】：jQuery height when using stop() in animation or slideUp/slideDown在动画或 slideUp/slideDown 中使用 stop() 时的 jQuery 高度
【发布时间】：2009-12-15 10:13:33
【问题描述】：

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

我正在为子菜单设置动画，以便在我将鼠标悬停在菜单项上时打开，并在鼠标移出时关闭。

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

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

这导致了一个更严重的问题，子菜单的高度减小到我鼠标移出时的大小。

【问题讨论】：

标签： jquery jquery-animate slidetoggle

【解决方案1】：

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

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;
}

如果您在隐藏的元素上有内边距，您会发现内边距也会缩小。只需在周围添加一个包含元素，然后更改其高度，但不要为其添加任何填充或边距。

【讨论】：

【解决方案2】：

这是一个已在 jQuery 1.7.2 中修复的错误：http://bugs.jquery.com/ticket/8685

【讨论】：

【解决方案3】：

你为什么不使用切换功能？我认为您必须将 ul 元素的高度设置回原始高度。目前高度保持在样式属性中，因此您的 ul 只有您将鼠标移出元素的高度。

【讨论】：

【解决方案4】：

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

当您将鼠标悬停在菜单集var menuOpening = true; 上并打开菜单集var menuOpening = true; 时，会回调设置menuOpening = false; 的打开动画，然后您可以检查是否 menuOpening，如果它为 false，则仅打开一个新菜单项。

然后，您可以使用它来获得看起来更好的东西。我以前有类似的工作，但找不到代码。

【讨论】：

【解决方案5】：

由于我通过 Google 找到了这个问题，而这些修复都对我不起作用，我应该提一下我是如何解决我的问题的。

这是我的原始代码：

elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar + ")").stop().slideDown();

这导致快速来回切换时高度被切断。

然后我在 slideDown 的 .stop() 之后添加了 .hide()

elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar  + ")").stop().hide().slideDown();

现在高度不会反弹，也不会被切断。希望这对将来的人有所帮助！

【讨论】：