1

这是Zi JsFiddle。为了复制我的问题，您必须将鼠标悬停在显示“javascript”的链接上，然后将鼠标悬停在该链接上，然后再将鼠标移回。如果您在动画完成之前执行此操作，则粉红色的滑动#subMenu将在滑动中途冻结。有没有办法防止这种情况发生？我已经尝试了一些.stop()s ，但我真的不希望每次鼠标进入或离开时重新开始动画.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();
    });
4

1 回答 1

2

用于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();
    });

演示

.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而不是slideheight 以获得所需的效果，以获得恢复向上/向下滑动动画的感觉：

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);
 });

演示

于 2013-06-27T22:24:30.167 回答