JQuery / CSS - 包装-DIV的平滑更改高度

Question

我有一堆嵌套在包装器-DIV中的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。

是否有一种简单的方法可以为包装DIV的高度设置动画，因此它会平滑滑动以适应内部DIV高度？

这里是一个例子的链接： https://jsfiddle.net/a3wvxcuq/#

Answer 1

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

<强> Demo

所以这只是指向正确的方向。

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

另一种看起来华而不实的方式： Demo 2

Annd，看起来我们在这里有一个胜利者。 Demo 3