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);

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

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

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

添加回调函数以将高度设置为 auto 可在动画完成后提高响应速度（信用chris-williams）：

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

这基本上与 Box9 的答案相同，但我将它包装在一个很好的jquery 插件中，该插件采用与常规动画相同的参数，用于当您需要更多动画参数并且厌倦了一遍又一遍地重复相同的代码时：

;(function($)
{
  $.fn.animateToAutoHeight = function(){
  var curHeight = this.css('height'),
      height = this.css('height','auto').height(),
      duration = 200,
      easing = 'swing',
      callback = $.noop,
      parameters = { height: height };
  this.css('height', curHeight);
  for (var i in arguments) {
    switch (typeof arguments[i]) {
      case 'object':
        parameters = arguments[i];
        parameters.height = height;
        break;
      case 'string':
        if (arguments[i] == 'slow' || arguments[i] == 'fast') duration = arguments[i];
        else easing = arguments[i];
        break;
      case 'number': duration = arguments[i]; break;
      case 'function': callback = arguments[i]; break;
    }
  }
  this.animate(parameters, duration, easing, function() {
    $(this).css('height', 'auto');
    callback.call(this, arguments);
  });
  return this;
  }
})(jQuery);

编辑：现在可链接且更清洁

更好的解决方案是不依赖 JS 来设置元素的高度。以下是将固定高度元素动画化为完整（“自动”）高度的解决方案：

var $selector = $('div');
    $selector
        .data('oHeight',$selector.height())
        .css('height','auto')
        .data('nHeight',$selector.height())
        .height($selector.data('oHeight'))
        .animate({height: $selector.data('nHeight')},400);

https://gist.github.com/2023150

这是有效的，它比之前的解决方案更简单：

CSS：

#container{
  height:143px;  
}

.max{
  height: auto;
  min-height: 143px;
}

JS：

$(document).ready(function() {
    $("#container").click(function() {      
        if($(this).hasClass("max")) {
            $(this).removeClass("max");
        } else {
            $(this).addClass("max");
        }

    })
});

注意：此解决方案需要 jQuery UI