JQuery / CSS - hladká zmena výšky balenia-DIV - jquery, html, css, html5

Mám veľa DIVs vnorených do obalu-DIV

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

každá vnútorná DIV má inú výšku. Zobrazujem / skryjem vnútorné DIVs cez fadeIn / fadeOut (), takže výška wrapperu preskočí z malého (inner_1) na high (inner_2) tak, aby zabalila vnútorné-DIVs tak, ako sú zobrazené.

Existuje jednoduchý spôsob, ako animovať výšku wrapper-DIV, takže by sa posúvala hladko, aby sa zmestila do výšky vnútornej DIV?

tu odkaz na príklad: https://jsfiddle.net/a3wvxcuq/#

odpovede:

Stačí prejsť číslo v milisekundách .show() a .hide() metódy a divs hladko prejde na nové dimenzie.

demonštrácie

Takže to len ukazuje na vás správnym smerom.

teraz kód je vaše plátno a vy ste umelec ;)

Takže ďalší spôsob, ktorý vyzerá okázalý: Demo 2

Zdá sa, že tu máme víťaza. Demo 3