jQuery slide and stop issues: animated element freezes with quick mouse movement

Question

Here is Zi JsFiddle . In order to replicate my issue you have to hover over the link that says 'javascript', then mouseout that, then mouseback in. If you do this before the animation is complete, the pink slidedown #subMenu will freeze midway through sliding. Is there a way to prevent this from happening? I have tried some .stop() s , but i really don't want the animation to re-start every time you mouseenter or leave the .navLink . The animation should begin from where it left off. In other words, if the pink section is halfway down, and a slideDown() gets executed, the pink should not dissappear and then slide down, it should slide down from where it is.

Thanks!!

JS:

 $('header#subHeader').hide();
    $('.navLink').hover(function () {
        if ($(this).children('div').length > 0) {
            var subMenu = $(this).find('.subMenu').html();
            $('header#subHeader').empty().append('<div>' + subMenu + '</div>').stop().slideDown();
        } else {
            $('header#subHeader').stop().slideUp();
        }
    });
    $('hgroup:first').on('mouseleave', function(){
        $('header#subHeader').slideUp();
    });

Answer 1

use stop(true, true) to complete the pending animation (jumping to the end) as well so that you dont get that mid way effect.

 $('header#subHeader').hide();
    $('.navLink').hover(function () {
        if ($(this).children('div').length > 0) {
            var subMenu = $(this).find('.subMenu').html();
            $('header#subHeader').empty().append('<div>' + subMenu + '</div>').stop(true, true).slideDown();
        } else {
            $('header#subHeader').stop(true, true).slideUp();
        }
    });
    $('hgroup:first').on('mouseleave', function(){
        $('header#subHeader').slideUp();
    });

Demo

.stop( [clearQueue ] [, jumpToEnd ] )

clearQueue
Type: Boolean
A Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEnd
Type: Boolean
A Boolean indicating whether to complete the current animation immediately. Defaults to false.

Try animate instead of slide height for the desired effect to get a feel of resuming the slide up/ down animation:

var slideUpSettings = {
             height: '0px'
         };

var slideDownSettings = {
             height: '20px'
         };


 $('.navLink').hover(function () {
     var $header = $('header#subHeader');
     if ($(this).children('div').length > 0) {

         var subMenu = $(this).find('.subMenu').html();
         $header.empty().append('<div>' + subMenu + '</div>').stop().animate(slideDownSettings, 500);
     } else {

         $header.stop().animate(slideUpSettings, 500);
     }
 });
 $('#subHeader').on('mouseenter', function () {
     $(this).stop().animate(slideDownSettings, 500);
 });


 $('hgroup:first').on('mouseleave', function () {
     $('header#subHeader').stop().animate(slideUpSettings, 500);
 });

Demo