jQuery幻燈片和停止問題：動畫元素凍結快速鼠標移動

Question

這裏是Zi JsFiddle。爲了複製我的問題，您必須將鼠標懸停在名爲'javascript'的鏈接上，然後鼠標移動，然後鼠標移入。如果在動畫完成之前執行此操作，粉色滑動板#subMenu將通過滑動中途凍結。有沒有辦法來防止這種情況發生？我嘗試了一些.stop() s，但我真的不希望動畫在您每次mouseenter或離開.navLink時重新開始。動畫應該從停止的地方開始。換句話說，如果粉色部分向下，並且執行了slideDown（），則粉色不應該消失，然後向下滑動，它應該從它所在的位置向下滑動。

謝謝！

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

使用stop(true, true)完成未決動畫（跳到結尾），以及讓你不拿到中旬方式的效果。

$('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. 

嘗試animate代替slide高度爲所期望的效果來感受恢復滑動上/下動畫：

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