JQuery/CSS -平滑改变div的高度

Question

我有一堆div嵌套在wrapper-DIV

<div id="wrapper">
    <div id="inner_1"></div>
    <div id="inner_2"></div>
    <div id="inner_3"></div>
</div>

每个内div都有不同的高度。我确实通过fadeIn/fadeOut()显示/隐藏内部div，因此包装器的高度从小(inner_1)跳到高(inner_2)，以包装内部div。

是否有一种简单的方法来动画wrap -div的高度，所以它会滑动平滑，以适应内部div的高度?

这里有一个链接到一个例子:https://jsfiddle.net/a3wvxcuq/

Answer 1

只需将以毫秒为单位的数字传递给.show()和.hide()方法，div将顺利过渡到新的维度。

这就给你指明了正确的方向。

现在代码是你的画布，你是艺术家;)

另一种看起来很华丽的方法是:Demo 2

看来我们这边有赢家了。Demo 3