jQuery метод .fadeToggle()

jQuery эффекты

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

jQuery метод .fadeToggle() позволяет плавно изменить прозрачность для отдельных элементов (в зависимости от состояния элемента: из видимого в скрытое, либо из скрытого в видимое). Другими словами, метод производит анимацию изменения прозрачности выбранных элементов плавно переводя их из скрытого состояния в видимое, или наоборот из видимого состояния в скрытое.


Обращаю Ваше внимание, что когда метод .fadeToggle() вызывается на видимом элементе, то при достижении уровня прозрачности равному нулю (opacitycss3: 0;) к элементу дополнительно добавляется значение CSS свойства display равное none, благодаря которому элемент не будет отображаться и как следствие влиять на макет страницы на которой он размещен.


jQuery синтаксис:

Синтаксис 1.4.4:
$( selector ).fadeToggle( duration, easing, complete ) 

duration - Number, или String
easing - String
complete - Function

$( selector ).fadeToggle( { options } ) // option: value (описание ниже)

options - PlainObject

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

1.4.4

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

ПараметрОписание
durationСтроковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова 'fast' и 'slow' соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easingКлючевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Без использования внешних плагинов имеет только два значения - linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
completeФункция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
options
  • duration (по умолчанию: 400).
    Тип: Number, или String.
    Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше).
  • easing (по умолчанию: swing).
    Тип: String.
    Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше).
  • queue (по умолчанию: true).
    Тип: Boolean, или String.
    Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( "имя очереди" ), чтобы запустить её.
  • specialEasing.
    Тип: PlainObject.
    Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4.
  • step.
    Тип: Function( Number now, Tween tween ).
    Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено.
  • progress.
    Тип: Function.
    Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8.
  • complete.
    Тип: Function.
    Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше).
  • start.
    Тип: Function (Promise Object animation).
    Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8.
  • done.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8.
  • fail.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8.
  • always.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .fadeToggle() (с callback функцией)</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".fadetoggle" ).click(function(){ // задаем функцию при нажатиии на элемент с классом fadetoggle
	    $( "div" ).fadeToggle( 1000, "linear", function(){ // плавно отображаем, или скрываем элементы <div> в документе
	       console.log("toggle completed"); // выводим в консоль браузера информацию о завершении метода для каждого элемента в наборе
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button class = "fadetoggle">Метод .toggle()</button>
		<hr>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery методa .fadeToggle() мы при нажатии на кнопку плавно изменяем прозрачность для всех элементов <div> в документе, скрывая, либо отображая их. При этом мы указали для наших методов продолжительность анимации равную секунде (1000 миллисекунд), эффект анимации происходит с одинаковой скоростью от начала до конца (linear) и функцию, которая после завершения анимации выводит в консоль браузера информацию о завершении выполнения метода для каждого элемента в наборе совпавших элементов.

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

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

Рассмотрим следующий пример в котором передадим в качестве параметра методов .fadeToggle() объект, содержащий различные опции, которые будут контролировать анимацию:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .fadeToggle() (объект с опциями в качестве параметра)</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".fadetoggle" ).click(function(){ // задаем функцию при нажатиии на элемент с классом fadetoggle
	    $( "div" ).fadeToggle( { // плавно отображаем, или скрываем элементы <div> в документе
	      duration: 800, // продолжительность анимации
	      easing: "linear", // скорость анимации
	      complete: function(){ // callback
	        console.log("fadeToggle completed");
	      },
	      queue: false // не ставим в очередь
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button class = "fadetoggle">Метод .toggle()</button>
		<hr>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .fadeToggle() мы при нажатии на кнопку плавно изменяем прозрачность для всех элементов <div> в документе, скрывая, либо отображая их. При этом мы в качестве параметров методов передаем объект содержащий следующие параметры:

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

Пример использования jQuery метода .fadeToggle() (объект в качестве параметра).
Пример использования jQuery метода .fadeToggle() (объект в качестве параметра)
jQuery эффекты