Скрипты

ovoo-v2-5-4-cms-онлайн-кинотеатра-и-тв OVOO-это мощная, гибкая и удобная для пользователя CMS с передовой системой управления видеоконтентом. Она была создана, чтобы обеспечить уникальный опыт...
stackposts-v1-5-–-social-marketing-tool Stackposts-это инструмент маркетинга в социальных сетях, который позволяет и помогает вам легко публиковать автоматические сообщения, планировать...
grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...

Для 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. Добавить свои

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

There are no comments posted here yet
  1. Серик

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

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

отлично

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

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

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

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

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

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

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