只运行一次 jQuery 动画，然后执行其他操作，然后反转动画

Question

我有一个带有一组 li 的菜单，当鼠标悬停在其上时，会以动画方式显示容器的高度，然后显示相关的子 .subnav。

我遇到的问题有两个。

1. 当我快速将鼠标悬停在 li 上时，容器的动画速度减慢为从那时起它再次开始动画。我希望能够说“仅在将鼠标悬停在任何 li 上时为其设置动画一次”，然后在悬停在容器外时将其返回到原始位置或子导航。

2. 当 .subnav 内容显示并且我将鼠标悬停在另一个触发器 li 上时，动画似乎正在尝试再次在容器上运行，因此意味着任何操作都会有延迟应该发生在之后。

我尝试过使用 unbind() 和 bind() 但不成功，我也尝试过使用 :animated 但我似乎无法得到逻辑正确。

这是我的代码：

var navHeight = $('#primary-nav').height();

$('#primary-nav-list li').hover( function() {
    var elem = $(this);

    if ($(this).is('#roc-noir')){ var subnavHeight = 173; }
    else { var subnavHeight = 235; }

    $('#primary-nav').stop(true,false).animate({height:subnavHeight}, function(){
        $('#primary-nav-list li').removeClass('active');
        $(this).addClass('open');
        $(elem).addClass('active');
        $('#primary-nav-list li').not(this).find('.subnav').fadeOut('fast');
        $(elem).find('.subnav').fadeIn('fast');
    });         
}, function(){
    $('#primary-nav').removeClass('open');
    $('#primary-nav').stop(true,false).animate({height:navHeight}, function(){
        $('#primary-nav-list li').removeClass('active');    
        $('#primary-nav-list li').not(this).find('.subnav').hide();
    });
});

任何帮助将不胜感激。

Answer 1

查看 Hover Intent 插件，看看它是否满足您的需要。它在开始之前添加了轻微的延迟，然后“停止”动画。

Answer 2

也许是这样的——如果它已经在运行，则中止标志？

var navHeight = $('#primary-nav').height();

var running = false;

var controller = {
     hoverIn : function() {
       if (running) return;
       running = true;

       var elem = $(this);
       var subnavHeight = 235;

       if ($(this).is('#roc-noir')) { subnavHeight = 173; }

       $('#primary-nav').stop(true,false).animate({height:subnavHeight}, function(){
          $('#primary-nav-list li').removeClass('active');
          $(this).addClass('open');
          $(elem).addClass('active');
          $('#primary-nav-list li').not(this).find('.subnav').fadeOut('fast');
          $(elem).find('.subnav').fadeIn('fast');
       });         
    },
    hoverOut : function(){
       if (running) return;

       $('#primary-nav').removeClass('open');
       $('#primary-nav').stop(true,false).animate({height:navHeight}, function(){
          $('#primary-nav-list li').removeClass('active');    
          $('#primary-nav-list li').not(this).find('.subnav').hide();
          running = false;
       });

    }

$('#primary-nav-list li').hover(controller.hoverIn,controller.hoverOut);