Анимация высоты блока JS/JQUERY (Пример)

На этой странице представлен простой пример анимации любого html блока с использованием библиотеки jQuery. Этот пример подойдет для использования на любом сайте, так как библиотека jQuery используется практически везде. Итак приступим.

Для чего это нужно? Этот пример поможет скрыть огромные блоки, списки или простыни текста. Ниже скрываемого блока вам необходимо будет создать кнопку «Показать всё» или что-то в этом духе чтобы можно было разворачивать сворачивать наш блок. Вот собственно ниже код этой кнопки. Расположение кнопки не имеет значения.

<button class="show-all" data-target="#clinic-list-1" data-action="block-hide">Показать всё</button>

Эта кнопка будет разворачивать блок на полную высоту или же сворачивать его, если блок раскрыт. У неё есть два обязательные параметры:

data-target=»#clinic-list-1″ — внутри скобок укажите ID блока который нужно скрывать вместе с #

data-action=»block-hide» — обязательный дата атрибут, благодаря которому мы знаем что нужно делать.

Блок, который нужно анимировать может быть любым тегом. Нам необходимо задать ему несколько параметров:

<ul class="clinic-list" id="clinic-list-1" data-max-height="400" data-block-hide="1">
     // любой текст или хтмл
</ul>

data-block-hide=»1″ — блоки с такими дата арибутами будут скрываться

data-max-height=»400″ — ограничить высоту блока до 400px

   $("[data-block-hide="1"]").each(function (index, value) {
        let el = $(this);
        el.attr('data-height', $(this).height())
            .css({
                "height": el.data('max-height') + 'px',
                "overflow": 'hidden',
            });
    });
    
    $(document).on('click', '[data-action="block-hide"]', function (event) {
        event.preventDefault();
        let elThis = $(this);
        let el = $($(this).data('target'));
        let duration = 1000;

        if (el.hasClass('active') == false) {
            el.animate({
                height: el.data('height') + elThis.height()
            }, duration).addClass('active');

            elThis.addClass('active');
        } else {
            el.animate({
                height: el.data('max-height')
            }, duration).removeClass('active');

            elThis.removeClass('active');
        }
    });

Я думаю, легко догадаться, что код выше выполняет сворачивание и разворачивание блока и анимацию, длительность которой можно настроить в переменной duration.

Я благодарен за использование этого примера на практике. Если есть проблемы и вопросы прошу написать в комментарии. Желаю успеха во всем!