jQuery-如何将div设置为特定的像素高度，然后将动画设置为百分比-平滑？

我有一个div，需要设置在一个特定的像素高度，比如说100px，然后当单击“显示更多”div时，将该div提高到其自然高度的100%。诀窍是让它顺利地发生

如果我从一个固定高度（比如100px）移动到另一个固定高度（比如200px），我可以平滑地设置动画，但这对我不起作用

有没有一种方法可以在特定高度打开一个div，并让它平滑地设置动画（向下滑动）到某个百分比

下面是JFIDLE：

一些信息。一些信息。一些信息。
一些信息。一些信息。一些信息。
一些信息。一些信息。一些信息。
显示更多
.模型{
宽度：100px；
背景颜色：黄色；
溢出：隐藏；
}
.ShowMore{
文字装饰：下划线；
}
$（“.Model”）。每个（函数（）{
$（this.css（“高度”，“50px”）；
});
$（“.ShowMore”）。单击（函数（）{
//这工作很顺利
//$（this.prev（）.css（“高度”，“100px”）；
});
$（“.ShowMore”）。单击（函数（）{
$（this.prev（）.animate（{height:“100%”），3000）；
});

为什么不将“显示更多内容”放在自己的div中，然后隐藏并显示，然后您就可以自动设置顶级div高度：

<div style="height:auto">
  <p>Always show</p>
  <div class="OtherContent">
     ...Other Content
  </div>
  <div class="ShowMore>Show More</div>
</div>


$(".ShowMore").click(function() {
// this works smoothly
  $(this).prev().slideDown();
});

总是显示

…其他内容
在设置元素并设置其动画之前，可以获取该元素的高度：

var m = $(".Model").height();

...

$(".ShowMore").click(function() {
    $(this).prev().animate({
        height: m + "px"
    }, 3000);
});

首先，我的代码确实有自己的div，就像你的一样。第二，我需要它在一个特定的高度打开，就像我说的。它必须以50px开始，并打开到100%。谢谢你！真棒的回答。我没有想到这一点。你的解决方案正是我想要的。谢谢
var m = $(".Model").height();

...

$(".ShowMore").click(function() {
    $(this).prev().animate({
        height: m + "px"
    }, 3000);
});