jQuery метод .fadeTo()

Определение и применение

jQuery метод .fadeTo() позволяет изменить уровень прозрачности у выбранных элементов.

Метод .fadeTo() похож на метод .fadeIn(), но в отличие от него позволяет контролировать необходимый уровень прозрачности элементов.

jQuery синтаксис:

Синтаксис 1.0:
$( selector ).fadeTo( duration, opacity, complete ) 

duration - Number, или String
opacity - Number (0 - 1)
complete - Function

Синтаксис 1.4.3:
$( selector ).fadeTo( duration, opacity, easing, complete ) 

duration - Number, или String
opacity - Number (0 - 1)
easing - String
complete - Function

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4.3)

Значения параметров

Параметр	Описание
duration	Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова 'fast' и 'slow' соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
opacity	Числовое значение между 0 и 1, обозначающее прозрачность для элемента (1 - элемент непрозрачный, 0.5 - среднее значение, 0 - элемент полностью прозрачный).
easing	Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Без использования внешних плагинов имеет только два значения - linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). *Значение по умолчанию swing.*
complete	Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery метода .fadeTo()</title>
		<style>div {
display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */	
width: 75px; /* ширина элемента */	
height: 150px; /* высота элемента */	
margin-right: 20px; /* внешний отступ справа */	
background-color: green; /* цвет заднего фона */	
}
</style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".fadeto" ).click(function(){ // задаем функцию при нажатиии на элемент с классом toggle
	    $( "div" ).fadeTo( 1000, 0.5, "linear" ); // линейно изменяем прозрачность элементов до 0,5 за одну секунду
	  });
	});
		</script>
	</head>
	<body>
		<button class = "fadeto">Метод .fadeTo()</button>
		<hr>
		<div></div>
		<div></div>
		<div style = "display: none"></div>
	</body>
</html>

В этом примере с использованием jQuery метода .fadeTo() мы при нажатии на кнопку линейно изменяем прозрачность элементов <div> до 0,5 за одну секунду (1000 миллисекунд). Обратите внимание, что скрытый элемент отображается, этого можно избежать используя свойство visibility со значением hidden, либо применяя селекторы не затрагивающие необходимые элементы.

Результат нашего примера:

Пример использования jQuery метода .fadeTo().

Рассмотрим следующий пример в котором зададим методу fadeTo() callback функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery метода .fadeTo() (с callback функцией)</title>
		<style>div {
display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */	
width: 75px; /* ширина элемента */	
height: 150px; /* высота элемента */	
margin-right: 20px; /* внешний отступ справа */	
background-color: red; /* цвет заднего фона */	
}
</style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".fadeto" ).click(function(){ // задаем функцию при нажатиии на элемент с классом toggle
	    var num = 0; // переменная (для вставки номера элемента)
	    $( "div" ).fadeTo( 500, 0.4, "linear", function(){ // линейно изменяем прозрачность элементов до 0,4 за пол секунды и вызываем функцию
	      num++; // увеличиваем переменную на 1 (инкремент)
	      $( this ).text( num ); // добавляем значение переменной элементу к которому применяется анимация
	   }); 
	  });
	});
		</script>
	</head>
	<body>
		<button class = "fadeto">Метод .fadeTo()</button>
		<hr>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .fadeTo() мы при нажатии на кнопку линейно изменяем прозрачность элементов <div> до 0,4 за пол секунды (500 миллисекунд). Кроме того, по завершению анимации, мы вызываем функцию, которая добавляет каждому элементу значение переменной. Обратите внимание, что внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация, что позволяет нам поочередно добавить каждому элементу <div> в виде текстового содержимого значение переменной, увеличенное на один.

Результат нашего примера:

Пример использования jQuery метода .fadeTo() (с callback функцией).

jQuery эффекты