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

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

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

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

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

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

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

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

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

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

Оставить комментарий

  Подписаться  
Уведомление о