Эффекты прозрачности позволяют нам, плавно изменяя прозрачность элемента, скрыть его или отобразить. Эффекты прозрачности реализованы
с помощью методов fadeOut(), fadeIn(), fadeTo() и fadeToggle().
Метод | Описание |
fadeOut | Скрывает элемент, уменьшая его прозрачность |
fadeIn | Отображает элемент, увеличивая его прозрачность |
fadeToggle | Сочетает методы fadeOut и fadeIn: если прозрачность равна нулю, то элемент отображается. Если элемент непрозрачен, то он скрывается |
fadeTo | Изменение прозрачности до указанного уровня |
Методы fadeOut(), fadeIn() и fadeToggle() имеют похожие формы использования:
fadeOut/fadeIn/fadeToggle(): метод без параметров
fadeOut/fadeIn/fadeToggle([duration] [, easing][, complete]). Параметр duration указывает
как долго изменение прозрачности элемента будет длиться. По умолчанию его значение равно 400 миллисекунд.
Параметр easing, который принимает название функции плавности анимации в виде строки. По умолчанию его значение равно
"swing". Также можно использовать значения 'slow' и 'fast', которые соответствуют длительности эффекта в 600 и 200 миллисекунд.
Параметр complete представляет функцию обратного вызова, вызываемую методом по завершении анимации
Метод fadeTo в отличие от других методов еще принимает и параметр opacity - оно принимает значение, до которого надо изменить прозрачность элемента:
fadeTo(duration, opacity [, easing][, complete]). В качестве значение opacity принимается значение от 0 (полностью прозрачный) до
1 (полностью видимый).
Допустим, пусть у нас на странице будет изображение и две кнопки, которые будут изменять прозрачность этого изображения:
<img src="ars.jpg" id="ars" /><br>
<button id="fadeIn">Отобразить</button>
<button id="fadeOut">Cкрыть</button>
<script type="text/javascript">
$(function() {
$('#ars').fadeTo(2000,0.6);
$('#fadeIn').click(function(){
$('#ars').fadeIn('slow', function(){alert('Отображено');});
});
$('#fadeOut').click(function(){
$('#ars').fadeOut(2000, function(){alert('Скрыто');});
});
});
</script>
Обратите внимание, что метод fadeIn увеличивает прозрачность до того значения, которое было до использования метода fadeOut, а не обязательно до 1. То есть в данном случае, поскольку в начале был применен метод fadeTo и прозрачность изменена до 0.6, то и метод fadeIn будет увеличивать прозрачность до 0.6.