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

Question

Hey!

I have a menu with hidden submenus.

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

This causes problems when the user mouses over a lot of menuitems, as 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.

Look at the example page below to see the problem I'm talking about.

jQuery Height Animate Bug

Any help would be greatly appreciated.

Answer 1

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.

Answer 2

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.

Answer 3

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.