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