高度为动态时滑动切换元素

Question

我在按箭头时显示评论部分，如下图所示。这也是fiddle。

这里应该滑动两个部分切换，信息文本部分和评论部分。

问题是顶部正方形在显示时不会滑动切换（从高度60px到高度100％）。然而它隐藏时会滑动（从100％到60px）。

我希望它在显示时滑动，但无法解决。我的猜测是它没有滑动，因为高度是动态的（100％）并且jQuery需要像素中的特定目标高度来制作动画？

$("footer").on("tap click", function () {
    $(this).parent().next().slideToggle();
    var section = $(this).prev();
    section.height() == 60 ? 
       section.height("100%") : 
       section.animate({ height: "60"}, "fast");
});

Answer 1

$("footer").on("tap click", function () {
    $(this).parent().next().slideToggle();
    var section = $(this).prev(),
        toHeight = (section.height() == 60) ? section.get(0).scrollHeight : 60;
    section.animate({ height: toHeight}, "fast");
});