Анимация в jQuery. Часть 1

Анимация в jQuery

От автора: приветствую вас, друзья. Начиная с данной статьи мы приступим к изучению анимации в jQuery, а также различных методов, позволяющих реализовать эффекты анимации. Приступим.

На сегодняшний день анимировать элементы страниц мы можем, используя возможности CSS3. Возможности CSS действительно далеко шагнули в этом плане. Однако библиотека jQuery позволяет реализовать некоторые задачи проще и, порой, без нее не обойтись для решения тех или иных задач.

Итак, давайте начнем знакомиться с методами, которые позволяют манипулировать элементами страницы и управлять эффектами анимации. Первые два метода — методы show() и hide(). Как следует из названия, методы отвечают за показ и скрытие элемента, к которому метод применен. Давайте взглянем на пример, скроем, к примеру, одну картинку и покажем вторую.

<p><img src="http://lorempixel.com/400/200/city" alt="" id="img1" width="400" height="
200"></p>
<p><img src="http://lorempixel.com/400/200/cats" alt="" id="img2" width="400" height="
200" style="display: none;"></p>

Анимация в jQuery

Как видим, вторая картинка не отображается, поскольку она скрыта через display:none. Теперь вызовем метод hide() для первого изображения и show() — для второго.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
$(function(){
 $('#img1').hide();
 $('#img2').show();
});

А вот теперь картинка города скрыта, а вот изображения милого котика — показывается.

Анимация в jQuery

А где же здесь анимация, спросите вы? Картинки мгновенно скрываются и показываются. На самом деле мы можем замедлить оба процесса, получив, соответственно, некоторый эффект анимации. Для того, чтобы замедлить, просто передадим первым параметром функции значение в миллисекундах, за которое должен отработать метод. Например, если мы хотим наблюдать работу метода в течение полусекунды — передадим значение 500:

$(function(){
 $('#img1').hide(500);
 $('#img2').show(500);
});

Обновите страницу, мы добились задуманного — картинки исчезают и появляются с анимационным эффектом. При доле фантазии мы уже даже с таким примитивным кодом можем добиться симпатичного эффекта.

Также, вместо автоматического эффекта мы можем повесить выполнение эффекта на событие клика. Давайте при клике по картинке будем ее прятать. Добавим кнопку:

<p><img src="http://lorempixel.com/400/200/city" alt="" id="img1" width="400" height="
200"></p>
<p><img src="http://lorempixel.com/400/200/cats" alt="" id="img2" width="400" height="
200"></p>
<button id="btn">Вернуть</button>

И небольшой код на jQuery:

$(function(){
 $('img').click(function(){
  $(this).hide(300);
 });
 $('#btn').click(function(){
  $('img').show(300);
 });
});

Теперь при клике по каждой картинке она будет исчезать с эффектом анимации, а при клике по кнопке — картинки будут возвращаться. Также методы hide и show могут принимать callback функцию, в которой мы можем выполнить дополнительные действия:

$(function(){
 $('img').click(function(){
  $(this).hide(300, function(){
 alert('Картинка исчезла');
  });
 });
 $('#btn').click(function(){
  $('img').show(300);
 });
});

На самом деле приведенные выше примеры достаточно искусственны, но тем не менее они вполне показывают суть работы простейших методов анимации hide и show. В следующих статьях мы познакомимся с другими методами jQuery, реализующими эффекты анимации. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree