只運行一次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動畫，然後執行其他操作，然後顛倒動畫

回答

相關問題