Главная » Файлы » Прочие скрипты » jQuery

Урок для новичков "плавное появление/исчезание объектов на jQuery" by Platinum
24.06.14, 08:33:52


Добрый день, дорогие пользователи контента ! =)
Прочитав урок по плавному скроллу от Apocalypse я подумал и решил: а ведь это действительно хорошая идея небольшими шагами вбивать юным веб-программистам знания по JavaScript, CSS, jQuery...
На данном уроке я коснусь только jQuery...
Сейчас мы научимся плавно скрывать/отображать блок с данными, предположим изображением...

Для начала проверьте, подключена ли у вас библиотека jQuery...(пользователей uCoz это не касается)
Если нет, то добавьте строку
Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


Далее...предположим, у нас есть картинка
Код
<img src="http://img.yandex.net/i/www/logo.png">

Сделаем вызов функции по клику на это изображение
Код
<img onclick="func()" src="http://img.yandex.net/i/www/logo.png">
, где "onclick" - это событие, вызванное по клику мыши, а "func" - это название функции
Заключим наше изображение в div
Код
<div id="1"><img onclick="func()" src="http://img.yandex.net/i/www/logo.png"></div>
, id="1" - идентификатор блока...
Теперь пропишем нашу функцию "func"
Код
<script type="text/javascript">  
  function func(){  
  $('div#1').fadeOut(1500); ------------------- 1 - идентификатор DIV'a, fadeOut - исчезание блока, 1500 - задержка (чем больше - тем медленнее)  
  };  
  </script>

Теперь давайте сделаем плавную смену двух картинок.
Добавим ещё одно изображение, при клике на которое будет выполняться функция func2 :
Код
<img onclick="func2()" src="http://bar.yandex.ru/i/opera/step_3.png">

Заключим его в DIV с id="2" (раз эта картинка будет появляться, значит изначально она не должна быть видна...не так ли ?)
Код
<div id="2" style="display:none"><img onclick="func2()" src="http://bar.yandex.ru/i/opera/step_3.png"></div> --------------display:none указывает на то, что блок НЕ отображается по умолчанию...


Напишем функцию, при которой первое изображение будет плавно уходить, а второе появляться...
Код
<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>


Если вы хотите, чтобы одна картинка ЗАМЕНЯЛА другую при клике, покажу вам ещё одну вещь...

Берём картинку
Код
<img onclick="smena()" src="http://img.yandex.net/i/www/logo.png">

Дадим ей имя....допустим "YA"
Код
<img name="YA" onclick="smena()" src="http://img.yandex.net/i/www/logo.png">

Как вы уже наверное заметили, при клике на это изображение идёт вызов функции "smena"
Пропишем эту функцию так, чтобы изображение менялось на другое...
Код
<script type="text/javascript">  
  function smena(){  
  YA.src="http://www.apo-ucoz.com/images/main/head_l.png";  
  };  
  </script>


Вот...пожалуй на этом пока что закончим))) В следующем уроке мы разберём простенькую галерею изображений...

Урок приготовил Platinum
Категория: jQuery | Добавил: Apocalypse | Теги: появление/исчезание, Плавное, урок, объектов, by, на, JQuery, Platinum, для, новичков
Просмотров: 470 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: