От автора: приветствую вас, друзья. Начиная с данной статьи мы приступим к изучению анимации в jQuery, а также различных методов, позволяющих реализовать эффекты анимации. Приступим.
На сегодняшний день анимировать элементы страниц мы можем, используя возможности CSS3. Возможности CSS действительно далеко шагнули в этом плане. Однако библиотека jQuery позволяет реализовать некоторые задачи проще и, порой, без нее не обойтись для решения тех или иных задач.
Итак, давайте начнем знакомиться с методами, которые позволяют манипулировать элементами страницы и управлять эффектами анимации. Первые два метода — методы show() и hide(). Как следует из названия, методы отвечают за показ и скрытие элемента, к которому метод применен. Давайте взглянем на пример, скроем, к примеру, одну картинку и покажем вторую.
|
1 2 3 4 |
<p><img src="//lorempixel.com/400/200/city" alt="" id="img1" width="400" height=" 200"></p> <p><img src="//lorempixel.com/400/200/cats" alt="" id="img2" width="400" height=" 200" style="display: none;"></p> |
Как видим, вторая картинка не отображается, поскольку она скрыта через display:none. Теперь вызовем метод hide() для первого изображения и show() — для второго.
|
1 2 3 4 |
$(function(){ $('#img1').hide(); $('#img2').show(); }); |
А вот теперь картинка города скрыта, а вот изображения милого котика — показывается.
А где же здесь анимация, спросите вы? Картинки мгновенно скрываются и показываются. На самом деле мы можем замедлить оба процесса, получив, соответственно, некоторый эффект анимации. Для того, чтобы замедлить, просто передадим первым параметром функции значение в миллисекундах, за которое должен отработать метод. Например, если мы хотим наблюдать работу метода в течение полусекунды — передадим значение 500:
|
1 2 3 4 |
$(function(){ $('#img1').hide(500); $('#img2').show(500); }); |
Обновите страницу, мы добились задуманного — картинки исчезают и появляются с анимационным эффектом. При доле фантазии мы уже даже с таким примитивным кодом можем добиться симпатичного эффекта.
Также, вместо автоматического эффекта мы можем повесить выполнение эффекта на событие клика. Давайте при клике по картинке будем ее прятать. Добавим кнопку:
|
1 2 3 4 5 |
<p><img src="//lorempixel.com/400/200/city" alt="" id="img1" width="400" height=" 200"></p> <p><img src="//lorempixel.com/400/200/cats" alt="" id="img2" width="400" height=" 200"></p> <button id="btn">Вернуть</button> |
И небольшой код на jQuery:
|
1 2 3 4 5 6 7 8 |
$(function(){ $('img').click(function(){ $(this).hide(300); }); $('#btn').click(function(){ $('img').show(300); }); }); |
Теперь при клике по каждой картинке она будет исчезать с эффектом анимации, а при клике по кнопке — картинки будут возвращаться. Также методы hide и show могут принимать callback функцию, в которой мы можем выполнить дополнительные действия:
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $('img').click(function(){ $(this).hide(300, function(){ alert('Картинка исчезла'); }); }); $('#btn').click(function(){ $('img').show(300); }); }); |
На самом деле приведенные выше примеры достаточно искусственны, но тем не менее они вполне показывают суть работы простейших методов анимации hide и show. В следующих статьях мы познакомимся с другими методами jQuery, реализующими эффекты анимации. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!
