Скрипты

lcrm-saas-v1-0-5-сервис-saas LCRM SAAS-это программное обеспечение CRM, которое вы можете запускать на своем собственном сервере и предлагать его в качестве продукта SAAS бесплатно...
smartend-v4-1-панель-администратора-laravel-с-интерфейсом-и-restful-api SmartEnd-это отличительная админ панель (панель управления) со всеми опциями, которые вам могут понадобиться для создания любых типов веб-сайтов на...
smart-invoice-system-v1-9-2-система-управления-счёт-фактурами Это мощное веб-приложение, основанное на PHP codeigniter framework для управления...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

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

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

k_prim2

Шаг -1

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

1
<script src="jquery.js" type="text/javascript"></script>

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

1
2
3
4
5
6
7
8
9
10
<script>
function anichange (objName) {
if ( $(objName).css('display') == 'none' ) {
$(objName).animate({height: 'show'}, 400);
} else {
$(objName).animate({height: 'hide'}, 200);
}
}
</script>

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

1
2
3
4
5
6
7
8
<a href="#" onclick="anichange('#divId'); return false">Открыть/Закрыть</a>
<div id="divId" style="display: none">
Тут тукст<br>
Тут текст <br>
Тут текст <br>
Тут текст<br>
</div>


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

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

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

Шаг-2

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



  1. Комментарии (1)

  2. Add Yours

Комментарии (1)

Комментарии отсутствуют

Не работало на сайте...

  Вложения
Недостаточно прав для просмотра вложений
 

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

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...