如何使用 jQuery 将元素的高度动画化为其自然大小？

使用 jQuery 实现可动画化的自动高度元素

使用动画将元素扩展到其自然高度可能是一项棘手的任务。如提供的示例所示，简单地将高度设置为“自动”可能不会触发动画。

要克服这个问题，需要采取多步骤方法：

1. 保留当前高度:

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

2. 暂时将高度设置为自动:

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

3. 计算自动高度:

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

4. 恢复之前的高度并制作动画:

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

5. 连接步骤:

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

按照这些步骤，元素可以平滑地动画到其自然高度。

以上是如何使用 jQuery 将元素的高度动画化为其自然大小？的详细内容。更多信息请关注PHP中文网其他相关文章！