在动画或slideUp/slideDown中使用stop()时的jQuery高度 [英] jQuery height when using stop() in animation or slideUp/slideDown

问题描述

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

我正在为子菜单设置动画，以便将鼠标悬停在菜单上时将其打开，而将鼠标悬停时将其关闭.

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

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

这引起了更严重的问题，子菜单的高度减小到了鼠标移出时的大小.

解决方案

通过在关闭动画结束后将高度设置为auto来解决.

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

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

I have a menu with hidden submenus.

I am animating the submenu to open when I mouse-over a menuitem, and close when I mouse-out.

When the user mouses over a lot of menuitems, all the animations get queued.

To fix the queuing problem, I added a stop() before the animation.

This caused an even worse problem with the height of the submenu decreasing to the size it is at when I mouse out.

解决方案

Solved by setting the height to auto after the closing-animation has finished.

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

If you have a padding on the element that you're hiding, you'll experience that the padding shrinks as well. Just add a containing element around, and change the height of that instead, but don't add any padding or margins to that.

这篇关于在动画或slideUp/slideDown中使用stop()时的jQuery高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！