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

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

使用响应式布局时，可能需要对元素的高度进行动画处理以自动调整其高度大小根据内容。但是，直接将 height 属性设置为“auto”动画可能不会产生所需的效果。

下面是一个尝试对

进行动画处理的示例代码。从 200px 到自动高度：

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

不幸的是，此代码不会将元素的高度动画设置为自动。相反，它只会将元素折叠到高度 0。

要实现所需的行为，请按照以下步骤操作：

1. 保存当前高度： 存储元素当前高度，获取auto后恢复

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

2. 暂时将高度切换为自动：暂时将元素的高度设置为“自动”以计算所需的高度。

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

3. 获取自动高度：获取将元素的高度设置为“自动”后的高度。

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

4. 切换回并动画到自动高度：将元素的高度恢复为其原始值，然后将其设置为汽车动画height.

   $('#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 将元素的高度设置为'自动”？的详细内容。更多信息请关注PHP中文网其他相关文章！