JQuery / CSS - гладка промяна на опаковката-DIV - jquery, html, css, html5

Имам куп DIVs, вложени в обвивка-DIV

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

всеки вътрешен DIV има различна височина. Аз показвам / скривам вътрешните DIVs чрез fadeIn / fadeOut (), така че височината на обвивката скача от малък (inner_1) към висок (inner_2), за да приключи вътрешните DIVs, както са показани.

Има ли лесен начин да анимирате височината на опаковката-DIV, така че да се плъзга гладко, за да пасне на вътрешната-DIV-височина?

тук линк към пример: https://jsfiddle.net/a3wvxcuq/#

Отговори:

Просто прехвърлете числото в милисекунди на .show() и .hide() методите и divs ще преминават плавно към новите измерения.

Демонстрация

Това е просто насочване към вас в правилната посока.

Сега кодът е вашето платно и вие сте художникът )

Друг начин, който изглежда наперен: Демонстрация 2

Анд, изглежда, че тук имаме победител. Демо 3