在jQuery动画中将div height设置为default

Question

我创建了一个下拉菜单,下拉部分的html基本上是这样的:

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

我想使用jQuery-Code(使用easing-plugin)为此设置动画,但以下代码不起作用:

$(".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'值时出错.声明已丢弃."

如果我在activate-Function中使用"height:'100px'"或类似的东西,它会按预期工作.但出于可维护性的原因,我希望自动计算高度,因此下拉菜单会根据其内容调整其大小.

怎么能实现这一目标？

问候,约斯特

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'
          });
}