jQuery / CSS - плавное изменение высоты переноса-DIV

#jquery #css #html

#jquery #css #HTML

Вопрос:

У меня есть куча DIVS, вложенных в оболочку-DIV

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

каждый внутренний DIV имеет разную высоту. Я показываю / скрываю внутренние разделы с помощью fadeIn / fadeOut(), поэтому высота обертки переходит от маленькой (inner_1) к высокой (inner_2), чтобы обернуть внутренние разделы так, как они показаны.

Есть ли простой способ анимировать высоту обертки-DIV, чтобы она плавно скользила, чтобы соответствовать внутренней высоте DIV?

вот ссылка на пример: https://jsfiddle.net/a3wvxcuq /#

Ответ №1:

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

ДЕМОНСТРАЦИЯ

Так что это просто указывает вам правильное направление.

Теперь код — это ваш холст, а вы художник 😉

Итак, еще один способ, который выглядит броско: демонстрация 2

Annd, похоже, у нас здесь победитель. Демонстрация 3