fadeToggle()

посл. ред. 28.10.2016

Метод fadeToggle() скрывает или показывает на странице элементы текущей выборки в зависимости от их текущего состояния. Для скрытых элементов (со свойством display: none) выполняется метод fadeIn(). Для остальных элементов выполняется метод fadeOut().

Анимация скрытия/появления элементов выполняется за счёт плавного изменения прозрачности элементов (свойство opacity).

Если элемент был скрыт средствами jQuery, тогда после отображения с помощью метода fadeToggle() свойство display получит прежнее значение.

Параметры анимации задаются в виде объекта. Параметры duration, easing и complete можно задать отдельными аргументами.

Варианты использования

jQ_object.fadeToggle([duration][, easing][, complete]) => jQuery: Выполняет анимацию скрытия/появления элементов выборки изменением прозрачности.
jQ_object.fadeToggle(опции) => jQuery: Выполняет анимацию скрытия/появления элементов выборки изменением прозрачности с учётом указанного объекта опций (параметров анимации).

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button>fadeToggle</button>
  <div style="width: 200px; height: 200px; background: coral"></div>
</body>
</html>
 
<script>
$('button').on('click', function() {
  $('div').fadeToggle(1000, function() {
      alert('Анимация завершена');
    });
});
</script>