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

Question

我想动画一个<div>从200px到auto的高度。我似乎无法使其工作。有人知道吗？

这是代码：

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

Answer 1

1. 保存当前高度：

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

1. 暂时将高度切换为自动：

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

1. 获取自动高度：

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

1. 切换回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);