Урок для новичков: Плавное появление/исчезание объектов на jQuery by Platinum
Добрый день, дорогие пользователи контента ! =)
Прочитав урок по плавному скроллу от Apocalypse я подумал и решил: а ведь это действительно хорошая идея небольшими шагами вбивать юным веб-программистам знания по JavaScript, CSS, jQuery...
На данном уроке я коснусь только jQuery...
Сейчас мы научимся плавно скрывать/отображать блок с данными, предположим изображением...
1#: Предположим, у нас есть картинка
|
1 |
<img src="http://img.yandex.net/i/www/logo.png"> |
Сделаем вызов функции по клику на это изображение
|
1 |
<img onclick="func()" src="http://img.yandex.net/i/www/logo.png"> |
"onclick" - это событие, вызванное по клику мыши, а "func" - это название функции
Заключим наше изображение в div:
|
1 |
<div id="1"><img onclick="func()" src="http://img.yandex.net/i/www/logo.png"></div> |
id="1" - идентификатор блока...
Теперь пропишем нашу функцию "func":
|
1 2 3 4 5 |
<script type="text/javascript"> function func(){ $('div#1').fadeOut(1500); //1 - идентификатор DIV'a, fadeOut - исчезание блока, 1500 - задержка (чем больше - тем медленнее) }; </script> |
2#: Теперь давайте сделаем плавную смену двух картинок
Добавим ещё одно изображение, при клике на которое будет выполняться функция func2:
|
1 |
<img onclick="func2()" src="http://bar.yandex.ru/i/opera/step_3.png"> |
Заключим его в DIV с id="2" (раз эта картинка будет появляться, значит изначально она не должна быть видна...не так ли ?):
|
1 |
<div id="2" style="display:none"><img onclick="func2()" src="http://bar.yandex.ru/i/opera/step_3.png"></div> |
display:none указывает на то, что блок НЕ отображается по умолчанию...
Напишем функцию, при которой первое изображение будет плавно уходить, а второе появляться...
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> function func(){ // при клике на первое изображение вызывается func() $('div#1').fadeOut(1500); // исчезает 1 картинка $('div#2').fadeIn(1500); // fadeIn - появление (атрибуты аналогичны исчезанию) }; function func2(){ // при клике на второе изображение вызывается func2() $('div#2').fadeOut(1500); // исчезает 2 картинка $('div#1').fadeIn(1500); // появляется 1 картинка }; </script> |
3#: Если вы хотите, чтобы одна картинка ЗАМЕНЯЛА другую при клике, покажу вам ещё одну вещь...
Берём картинку:
|
1 |
<img onclick="smena()" src="http://img.yandex.net/i/www/logo.png"> |
Дадим ей имя....допустим "YA":
|
1 |
<img name="YA" onclick="smena()" src="http://img.yandex.net/i/www/logo.png"> |
Как вы уже наверное заметили, при клике на это изображение идёт вызов функции "smena"
Пропишем эту функцию так, чтобы изображение менялось на другое:
|
1 2 3 4 5 |
<script type="text/javascript"> function smena(){ YA.src="http://www.apo-ucoz.com/images/main/head_l.png"; }; </script> |
Вот...пожалуй на этом пока что закончим))) В следующем уроке мы разберём простенькую галерею изображений...
Урок приготовил Platinum
