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

Question

我想为 <div> 制作动画来自 200px至auto高度。不过，我似乎无法让它发挥作用。有人知道怎么做吗？

代码如下:

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

Answer 1

1. 保存当前高度:

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

2. 暂时将高度切换为自动:

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

3. 获取自动高度:

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

4. 切换回 curHeight 并动画到 autoHeight:

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