От автора: приветствую вас, друзья. Итак, мы продолжаем изучение методов jQuery, позволяющих реализовать эффекты анимации. Сегодня мы рассмотрим несколько методов группы fade, а именно: fadeIn, fadeOut и других, работающих с непрозрачностью элемента.
Итак, методы группы fade анимируют элемент за счет его свойства непрозрачности (opacity), т.е. для исчезновения элемента значение свойства opacity плавно изменяется от 1 до 0. При достижении нуля свойство display элемента становится none. И, наоборот, для плавного появления элемента значение изменяется от 0 до 1.
Синтаксис использования методов fade аналогичен уже изученным нами методам hide, show и методам группы slide. Давайте возьмем пример из предыдущего урока и заменим методы slideUp и slideDown методами fadeOut и fadeIn соответственно.
|
1 2 3 4 5 6 7 8 |
$(function(){ $('#hide').click(function(){ $('.panel-body').fadeOut(); }); $('#show').click(function(){ $('.panel-body').fadeIn(); }); }); |
Мы использовали лишь другой набор методов, ничего больше в коде не изменили, остальной код остался прежним. При этом мы получили другой тип анимации. Вместо сворачивания и разворачивания элемента, теперь он плавно растворяется и проявляется. Довольно симпатичный эффект.
Как и в случае с методами slide, в fade есть также метод, сочетающий в себе обе функции – появление и растворение – это метод fadeToggle, который покажет элемент, если он скрыт, и скроет его, если он показывается.
|
1 |
<button class="btn btn-success" id="btn">Скрыть / Показать</button> |
|
1 2 3 4 5 |
$(function(){ $('#btn').click(function(){ $('.panel-body').fadeToggle(); }); }); |
И последний метод, с которым мы познакомимся, — метод fadeTo. Данный метод позволяет изменить непрозрачность элемента до определенного значения. Первым параметром мы можем передать значение в миллисекундах, на протяжении которого будет работать анимация. Вторым параметром передаем значение непрозрачности от 0 до 1.
Например, при клике по первой кнопке сделаем элемент полупрозрачным за полсекунды, а при клике по второй кнопке вернем прежнее значение непрозрачности мгновенно.
|
1 2 |
<button class="btn btn-success" id="hide">Полупрозрачный</button> <button class="btn btn-primary" id="show">Непрозрачный</button> |
|
1 2 3 4 5 6 7 8 |
$(function(){ $('#hide').click(function(){ $('.panel-body').fadeTo(500, .5); }); $('#show').click(function(){ $('.panel-body').fadeTo(0, 1); }); }); |
Как видим, работа с различными методами анимации очень похожа, при этом использование тех или иных методов дает нам разный эффект анимации. На этом мы завершим текущую статью. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
