如何使用 jQuery 将 Div 的高度设置为'自动”？

使用 jQuery 将元素动画化为自动高度

您想要为 div 制作动画以根据其内容自动调整其高度。虽然基本代码很简单，但它可能无法按预期工作。我们将深入研究解决方案，并在下面提供逐步说明。

代码片段

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

解决方案

提供的代码尝试将 div 的高度设置为“自动”，允许其根据其高度进行扩展 内容。但是，它不起作用，因为 div 的初始高度设置为 200px。当“自动”高度从 200px 开始动画时，没有可见的变化。

步骤

要达到所需的效果，我们需要首先保存当前高度（ 200px）并暂时将高度设置为“auto”以计算实际的自动高度。操作方法如下：

1. 保存当前高度：

   var curHeight = $('#first').height();

   登录后复制

2. 将高度设置为自动（临时）：

   $('#first').css('height', 'auto');

   登录后复制

3. 获取自动高度：

   var autoHeight = $('#first').height();

   登录后复制

4. 恢复到当前高度并动画：

   $('#first').height(curHeight).animate({height: autoHeight}, 1000);

   登录后复制

组合代码：

var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);

以上是如何使用 jQuery 将 Div 的高度设置为'自动”？的详细内容。更多信息请关注PHP中文网其他相关文章！