2

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

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

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

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

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

4

5 回答 5

7

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

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

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

于 2009-12-15T11:45:18.377 回答
1

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

于 2012-05-11T20:13:07.930 回答
0

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

于 2009-12-15T10:23:13.170 回答
0

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

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

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

于 2009-12-15T10:24:24.117 回答
0

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

这是我的原始代码：

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

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

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

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

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

于 2013-05-08T17:34:57.260 回答