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.
开发者_Python百科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.
This was a bug that has been fixed in jQuery 1.7.2: http://bugs.jquery.com/ticket/8685
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.
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.
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!
精彩评论