jQuery幻灯片和停止问题：动画元素通过快速鼠标移动冻结

这是Zi JsFiddle 。 为了复制我的问题，你必须将鼠标hover在“javascript”链接上，然后鼠标移开，然后鼠标回来。如果你在动画完成之前这样做，粉红色的滑动#subMenu将在滑动中途冻结。 有没有办法防止这种情况发生？ 我尝试了一些.stop() ，但我真的不希望每次你进入.navLink或离开.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('
' + subMenu + '
').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('
' + subMenu + '
').stop(true, true).slideDown(); } else { $('header#subHeader').stop(true, true).slideUp(); } }); $('hgroup:first').on('mouseleave', function(){ $('header#subHeader').slideUp(); }); 

演示

.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('
' + subMenu + '
').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); }); 

演示