fadeToggle()

.fadeToggle( [ продолжительность ],[ ослабление ], [ вызов ] )

Возвращает: jQuery

Описание: Отображает или скрывает соответствующие элементы с помощью анимации непрозрачности.

.fadeToggle( [ продолжительность ], [ ослабление ], [ вызов ] )

Добавлена в версию: 1.4.4

продолжительность

Строка, Число

Строка или число, определяющие, как долго анимация будет работать.

ослабление

Строка

Строка, указывающая какая функция ослабления будет использоватся для перехода.

вызов

Функция

Функция вызываемая после завершения анимации.

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

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

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

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

Дополнительные примечания:

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

Пример

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

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

Результат выполнения кода выше:

Попробуйте сами

Пример - Полный код:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    $("button:first").click(function() {
      $("p:first").fadeToggle("slow", "linear");
    });
    $("button:last").click(function () {
      $("p:last").fadeToggle("fast", function () {
        $("#log").append("<div>finished</div>");
      });
    });
  });
  </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>
</body>
</html>