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

Question

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

如果我从一个固定高度(例如 100 像素)转到另一个固定高度(例如 200 像素)，我可以平滑地为其设置动画，但这对我不起作用。

有没有办法在特定高度打开 div 并让它以百分比平滑地动画(向下滑动)？

这是 jFiddle:http://jsfiddle.net/EvikJames/3pCSg/2/

<div class="Model">
    Some info. Some info. Some info.
    Some info. Some info. Some info.
    Some info. Some info. Some info.
</div>
<div class="ShowMore ">show more</div>

.Model {
    width: 100px;
    background-color: yellow;
    overflow: hidden;
  }
   .ShowMore {
    text-decoration: underline;
}

$(".Model").each(function() {
    $(this).css("height", "50px");
});

$(".ShowMore").click(function() {
    // this works smoothly
    // $(this).prev().css("height", "100px");
});
$(".ShowMore").click(function() {
    $(this).prev().animate({height: "100%"}, 3000);
});

Answer 1

您可以在设置元素并为其设置动画之前获取元素的高度:

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

...

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

http://jsfiddle.net/MzWGz/