JQuery / CSS - płynna zmiana wysokości owijania-DIV - jquery, html, css, html5

Mam kilka DIV zagnieżdżonych w opakowaniu-DIV

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

każda wewnętrzna DIV ma inną wysokość. Pokazuję / ukrywam wewnętrzne DIV za pomocą fadeIn / fadeOut (), więc wysokość opakowania przeskakuje od małego (wewnętrznego_1) do wysokiego (wewnętrznego_2), aby owinąć wewnętrzne DIV, jak pokazano.

Czy istnieje prosty sposób na animację wysokości owijki DIV, aby przesuwała się gładko, aby dopasować się do wewnętrznej wysokości DIV?

tutaj link do przykładu: https://jsfiddle.net/a3wvxcuq/#

Odpowiedzi:

Wystarczy podać liczbę w milisekundach do .show() i .hide() metody i divy płynnie przechodzą do nowych wymiarów.

Próbny

To tylko wskazuje ci właściwy kierunek.

Teraz kod to twoje płótno, a ty jesteś artystą ;)

Więc inny sposób, który wygląda krzykliwie: Demo 2

Annd, wygląda na to, że mamy tutaj zwycięzcę. Demo 3