在动画或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;
}

如果你在隐藏的元素上有填充,你会体验到填充也会缩小.只需添加一个包含元素,然后改变它的高度,但不要添加任何填充或边距.