Эффекты прозрачности позволяют нам, плавно изменяя прозрачность элемента, скрыть его или отобразить. Эффекты прозрачности реализованы
с помощью методов 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.