javascript - 在 jQuery 动画中将 div 高度设置为默认值

Question

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

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

我想使用 jQuery-Code(带有缓动插件)对此进行动画处理，但以下代码不起作用:

$(".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'
    }
  );
}

错误控制台中的消息是:“警告:解析‘高度’值时出错。声明已删除。”

如果我在 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'
          });
}