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

我有一组菜单，其中包含一组li的菜单，它们在盘旋时为容器的高度设置动画，然后显示相关的子节点.subnav。只运行一次jQuery动画，然后执行其他操作，然后颠倒动画

我遇到的问题是2倍。

当我将鼠标悬停在li的快速，容器的动画减慢，因为它再次从该点开始播放动画。我希望能够说：“只有当将鼠标悬停在任何li的上方时，才会动起来一次”，然后在将鼠标悬停在容器或subnav外时将其返回到原始位置。
当.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(); 
    }); 
});

任何帮助，将不胜感激。

来源

2011-05-13 Craig

你可以包含html或jsfiddle吗？ – Hogan 2011-05-13 12:58:39

看看Hover Intent插件，看看它是否满足你的需求。它在开始之前会稍微延迟一段时间，然后“停止”动画。

来源

2011-05-13 12:58:18

这可能会解决它的一部分，谢谢。 – Craig 2011-05-16 12:03:48

将函数分解为2并使用hoverIntents'config'设置延迟实际上解决了最主要的问题，即主导航的动画。 – Craig 2011-05-16 14:27:18

也许是这样的 - 如果它已经运行中止的标志？

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

来源

2011-05-13 13:09:13 Hogan

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

回答

相关问题