Раскрывающийся контейнер DIV с помощью Jquery

22.11.2019
CSS, jQuery

Категория: jQuery.

56654-1523332Эффект появление и скрытие объектов на странице довольно часто используеца, а с благодаря Jquery это будет выглядеть и очень красиво (смотрим пример).

k_prim2-3795145

Шаг -1

Для начала подключим библиотеку Jquery, просмотреть последнюю версию всегда можно здесь http://docs.jquery.com/Downloading_jQuery . Вставьте следующую строчку между тегами

1

Теперь создадим функцию с именем anichange и вставим её также между .

123456789
10
 

function anichange (objName) {
 if ( $(objName).css('display') == 'none' ) {
 $(objName).animate({height: 'show'}, 400);
 } else {
 $(objName).animate({height: 'hide'}, 200);
 }
}

Давайте разберёмся как это работает Функция css в данном примере используется для считывания значения у свойства display объекта objName . Таким образом от того какое получено значение функция anichange производит изменения на противоположенное с различным эффектом анимации. Шаг-2

Теперь осталось добавить контейнер DIV в котором находиться текст который и будет открываться если нажать Открыть, так как по умолчанию он невидим из за style=»display: none».

Normal 0 false false false RU X-NONE X-NONE

Давайте разберёмся как это работает

Функция css в данном примере используется для считывания значения у свойства display объекта objName . Таким образом от того какое получено значение функция anichange производит изменения на противоположенное с различным эффектом анимации.

Шаг-2

Теперь осталось добавить контейнер DIV в котором находиться текст который и будет открываться если нажать Открыть, так как по умолчанию он невидим из за style=»display: none».

Метки: , ,