Question

I have an issue with a toggling animation with JQuery. I have a menu, which has subitems, which slide open on hover of the main item. This I can achieve fine, however, for a long list of items, I would prefer to be able to stop the opening, and slide shut the menu, without having to wait for the slideDown() animation to complete.

$('.menubar-topitem').on('mouseenter',function(){
    $(this).children('.menubar-inner').stop(true).slideDown(); 
}).on('mouseleave',function(){
    $(this).children('.menubar-inner').stop(true).slideUp();
});

This code achieves what I require, however when I then hover back over the menu item, the submenu only opens as far as the animation reached before I stopped it the first time. It seems that JQuery stores the height of the submenu from when the animation was stopped first time, and then only opens as far as this the second time.

I am aware that I can fix this problem by using stop(true,true) but that creates a horrible jump in the animation. Is there anyway I can prevent this behaviour without having to complete the animation, or any work around so that the user does not see any jumps, but instead sees a flowing menu system?

Answer 1

The fix for this is to explicitly animate hard-coded values rather than depending on the slideUp/slideDown functions:

$('.menubar-topitem').on('mouseenter',function(){
    var $this  = $(this),
        height = $this.children('.menubar-inner').children().height();
    $this.children('.menubar-inner').stop().animate({height : height}, 250); 
}).on('mouseleave',function(){
    $(this).children('.menubar-inner').stop().animate({height : 0}, 250);
});

Then set the CSS overflow property to hidden for the animated elements. Also to dynamically get the height of the .menubar-inner elements you can nest a div in them and get the height of that div element:

HTML–

<div class="menubar-topitem">
    <h1>This is a Menu Top Item</h1>
    <div class="menubar-inner">
        <div>
            <p>Some Content</p>
            <p>Some More Content</p>
        </div>
    </div>
</div>

CSS–

.menubar-inner {
    overflow : hidden;
    height   : 0;
}

Here is a demo: http://jsfiddle.net/n6h2S/

You will run into the same problem with fadeIn/fadeOut but there is another function called fadeTo that allows you to explicitly set the opacity to fade to.