設置DIV高度在jQuery的動畫

Question

我創建了一個下拉菜單默認情況下，下拉部分HTML基本上是這樣的：

<div class="menu-item"> 
    <!-- Menu title --> 
    <div class="drop-down"> 
    <!-- Content --> 
    </div> 
</div> 

我想這個動畫使用jQuery-代碼（與寬鬆-插件），但下面的代碼不起作用：

$(".menu-item").mouseenter(activate); 
$(".menu-item").mouseleave(deactivate); 

function deactivate() 
{ 
    var dropdown = $(this).find("div.drop-down"); 
    dropdown.stop().animate(
    {height:  '0px'}, 
    {queue:  false, 
    duration: 600, 
    easing:  'easeOut' 
    } 
); 
} 

function activate() 
{ 
    var dropdown = $(this).find("div.drop-down"); 
    dropdown.stop().animate(
    {height:  'auto'}, 
    {queue:  false, 
    duration: 600, 
    easing:  'easeOut' 
    } 
); 
} 

錯誤控制檯的信息是：「警告：錯誤解析值‘高度’宣言下降。」

如果我使用「height：'100px'」或類似的東西activate功能它按預期工作。但出於可維護性的原因，我希望自動計算高度，因此下拉框將其大小調整爲其內容。

這是如何實現的？

問候， 約斯特

Answer 1

我會嘗試使用slideUp()和slideDown()這個動畫。請注意，這些功能接受緩動功能。

其他選項，如果由於某種原因，你需要使用animate對於這一點，你可能想要做這樣的事情在你的activate功能：

function activate(){ 
    var dropdown = $(this).find("div.drop-down"); 

    dropdown.css('height','auto') 
      .hide() 
      .stop() 
      .animate(
      {height:  'auto'}, 
      {queue:  false, 
       duration: 600, 
       easing:  'easeOut' 
      }); 
} 

Answer 2

一種解決方案可以是高度值存儲在所述去激活方法以及激活時使用它。我不認爲jQuery支持將維屬性設置爲字符串值。

var menu_handler = (function(){ 
    var orig_height = 0; 
    return { 
    deactivate : function deactivate() { 
     var dropdown = $(this).find("div.drop-down"); 
     orig_height = dropdown.height(); 
     dropdown.stop().animate(
     {height:  '0px'}, 
     {queue:  false, 
     duration: 600, 
     easing:  'easeOut' 
     } 
    ); 
    }, 
    activate : function activate() { 
     var dropdown = $(this).find("div.drop-down"); 
     dropdown.stop().animate(
     {height:  orig_height}, 
     {queue:  false, 
     duration: 600, 
     easing:  'easeOut' 
     } 
    ); 
    } 
    }; 
} 

$(".menu-item").mouseenter(menu_handler.activate)); 
$(".menu-item").mouseleave(menu_handler.deactivate));