Question

我有一个带有一组li的菜单，当它悬停在上面时，会动画容器的高度，然后显示相关的孩子.subnav。

我遇到的问题有两倍。

当我将鼠标悬停在li的快速上时，容器的动画会从该点再次开始动画时减慢速度。我希望能够说“当只悬停在任何li上时，只有动态一次”，然后当它悬停在容器或子空间之外时将其返回到原始位置。< / p>
当.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);

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

2 个答案: