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

05.12.2011
jQuery

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

k_prim2-1550600

Шаг -1

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

1

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

12345678910
 

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».

12345678
 
Открыть/Закрыть

Тут тукст

Тут текст 

Тут текст 

Тут текст

На этом всё, надеюсь вы разберётесь в этом несложном примере.


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

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

Шаг-2

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

Метки: ,