jQuery height when using stop() in animation or slideUp/slideDown

问题

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.

回答1:

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.

回答2:

This was a bug that has been fixed in jQuery 1.7.2: http://bugs.jquery.com/ticket/8685

回答3:

Why don't you use the toggle function? I think you have to set the height of your ul elements back to the original height. At the moment the height stays in style attribute, so your ul has only the height you moved your mouse out of the element.

回答4:

You can store a variable to store whether the menu is open or not.

When you hover over and open the menu set var menuOpening = true; then have a call back on the open animation which sets menuOpening = false; you can then check whether menuOpening and only open a new menu item if it is false.

You can then play with this to get something that looks a lot better. I've got something similar working before but can't find the code.

回答5:

Since I found this question through Google and none of these fixes worked for me, I should mention how I fixed my problem.

Here was my original code:

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

This was causing the height to get cut off when switching back and forth quickly.

I then added .hide() after .stop() on the slideDown

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

And now the height doesn't bounce around nor is it ever cut off. Hope this helps someone in the future!

来源：https://stackoverflow.com/questions/1906420/jquery-height-when-using-stop-in-animation-or-slideup-slidedown

标签

jquery

jquery-animate

slidetoggle