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

javascript jquery html css jquery-animate

2022-08-30 01:50:32

我想从到高处进行动画处理。不过，我似乎无法让它工作。有人知道怎么做吗？<div>200pxauto

代码如下：

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

答案 1

保存当前高度：
```
var curHeight = $('#first').height();
```
暂时将高度切换为自动：
```
$('#first').css('height', 'auto');
```
获取自动高度：
```
var autoHeight = $('#first').height();
```

切换回并制作动画至：curHeightautoHeight

$('#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);

答案 2

IMO这是最干净，最简单的解决方案：

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000 );

说明： DOM 已经从其初始渲染中知道展开的 div 在设置为自动高度时的大小。此属性作为存储在 DOM 节点中。我们只需要通过调用从jQuery元素中获取DOM元素，然后我们就可以访问该属性。scrollHeightget(0)

添加回调函数以将高度设置为自动，以便在动画完成后实现更大的响应能力（感谢 chris-williams）：

$('#first').animate({
    height: $('#first').get(0).scrollHeight
}, 1000, function(){
    $(this).height('auto');
});