0

我有一个带有一组li's 的菜单，当悬停在上面时，会为容器的高度设置动画，然后显示相关的 child .subnav。

我遇到的问题有 2 倍。

  1. 当我将鼠标悬停在li's quick上时，容器的动画会减慢，因为它从该点再次开始动画。我想能够说“只在悬停在任何's上时设置一次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();
    });
});

任何帮助，将不胜感激。

4

2 回答 2

1

看看Hover Intent插件，看看它是否满足您的需求。它在开始之前增加了一点延迟，随后“停止”了动画。

于 2011-05-13T12:58:18.433 回答
0

Maybe something like this -- a flag for abort if it is already running?

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-13T13:09:13.320 回答