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

Question

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

我正在制作子菜单的动画，当我将鼠标悬停在菜单项上时打开，并在鼠标移开时关闭。

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

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

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

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

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