animate函数无法识别height:auto属性

今天遇到一个问题，在进行展开/折叠动画效果时，发现用animate函数不识别height:auto,具体代码如下：

$(document).ready(function () {

$(".flip").click(function () {

if($(this).hasClass("btn-close")){

$(this).removeClass("btn-close");

$("div.panel").animate({"height":"42px"},1000);

}else {

$(this).addClass("btn-close");

$("div.panel").animate({ "height": "auto" }, 1000);

}

});

});

最终想到的解决方法是，先把当前的高度获取到，然后再把height:auto的高度获取到，然后在使用动画进行高度的过渡。具体代码如下：

$(document).ready(function () {

$(".flip").click(function () {

if($(this).hasClass("btn-close")){

$(this).removeClass("btn-close");

$("div.panel").animate({"height":"42px"},1000);

}else {

$(this).addClass("btn-close");

 var currentHeight = $("div.panel").height();

var autoHeight = $("div.panel").css('height', 'auto').height();

$("div.panel").height(currentHeight).animate({ height: autoHeight }, 1000); 

}

});

});

html结构代码如下：

<div class="panel">

<p> 小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？</p>

<p> 妈妈：因为我们的身体没有骨23sc.cn骼的支撑，只能爬，又爬不快。所以要这个壳的保护！</p>

<p> 小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ </p>

<p> 妈妈：因为毛虫姊姊能变成蝴蝶，23sc.cn天空会保护她啊。 </p>

<p> 小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？</p>

<p> 妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。</p>

<p> 小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 </p>

<p> 蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。

</p>

 

</div>

 

<p class="flip">请点击这里</p>