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

我有一个菜单，上面有一组

li

，当鼠标悬停在上面时，它会设置容器高度的动画，然后显示相关的子

.subnav

我遇到的问题是2倍。

当我将鼠标悬停在

li

的上时，容器的动画速度会减慢，因为它将从该点再次开始动画。我希望能够说“当鼠标悬停在任何

li

上时，仅为该设置一次动画”，然后当鼠标悬停在容器或子AV上时，将其返回到原始位置

当显示

.subnav

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

我尝试过使用

unbind（）

和

bind（）

但没有成功，我也尝试过使用

：动画

，但我似乎无法正确理解逻辑

这是我的密码：

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

---

任何帮助都将不胜感激。

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

可能是这样的——如果动画已经在运行，是否会添加一个中止标志

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

---

您可以包含html或JSFIDLE吗？将函数拆分为2，并使用hoverIntents'config'设置延迟实际上解决了最突出的问题，即主导航的动画。