.fadeToggle()

Показывает или скрывает заданные элементы с анимацией их прозрачности. Метод появился в jQuery 1.4.4.

.fadeToggle( [ duration ], [ easing ], [ callback ] )

duration — Строка или число, определяющая длительность анимации.
easing — Строка, определяющая тип анимации (задает функцию, используемую для анимации).
callback — Функция, которая запускается один раз после завершения анимации.

Метод .fadeToggle() изменяет прозрачность заданных элементов. Когда метод выполняется над видимыми элементами, то их прозрачность уменьшается до 0, после чего их свойство display принимает значение none. В результате после выполнения анимации над элементами и уменьшением их прозрачности до 0, элемент становится невидимым и уже не влияет на разметку страницы, то есть положение на ней других элементов.

Длительность выполнения анимации задается в миллисекундах; чем больше значение, тем медленее выполняется анимация. Строки 'fast' и 'slow', переданные в качестве аргумента вместо числовых значений, приведут к анимации с длительностью 200 и 600 миллисекунд соответственно.

Строка, задающая функцию анимации, определяет скорость, с которой анимация будет выполняться на своих различных этапах. В jQuery по умолчанию существует одна функция анимации, называемая swing, и анимация с постоянной скоростью, называемая linear. Большее количество фунций анимации доступно с использованием плагинов или jQuery UI.

Если указан третий аргумент в виде функции, то эта функция будет запущена один раз после выполнения анимации. Это удобно для последовательного вызова различных анимаций. В фунцию анимации не могут быть переданы аргументы, но в ее контексте существует ссылка на элемент, над которым производится анимация — существует объект this. Если аниммация выполняется над несколькими элементами, то функция будет вызвана один раз на каждый анимированный элемент, а не на всю анимацию.

Примечание: Все эффекты jQuery, включая .fadeToggle(), могут быть отключены установкой глобального параметра jQuery.fx.off = true, который устанавливает длительность выполнения любой анимации на 0. Подробнее о выключении анимации можно узнать на странице свойства jQuery.fx.off.

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

Задача: Скрывать или показывать первый параграф с длительностью анимации 600 мс и использованием линейного типа анимации. Скрывать или показывать последний параграф с длительностью анимации 200 мс, показывая сообщение "finished" после каждой анимации.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>

<p>This paragraph has a fast animation.</p>
<div id="log"></div>

<script>
  $("button:first").click(function() {
    $("p:first").fadeToggle("slow", "linear");
  });
  $("button:last").click(function () {
    $("p:last").fadeToggle("fast", function () {
      $("#log").append("<div>finished</div>");
    });
  });
</script>

</body>
</html>

.fadeToggle()

.fadeToggle( [ duration ], [ easing ], [ callback ] )

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

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