Скрипты

grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...
live-chat-3-v3-7-онлайн-чат-поддержки Live Chat 3 - лучший способ помочь своим клиентам. Это намного быстрее, чем электронная почта и более эффективней, чем телефон. Не оставляйте своих...
repairer-2-3-система-управления-мастерской Система управления мастерской по ремонту электроники и т.д. Это на самом деле инновационный, простой и мощный инструмент управления. Это просто Ваш...

Для 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. Комментарии (2)

  2. Add Yours

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

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

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

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

отлично

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

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

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

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

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

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

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