.fadeOut()

Описание: Скрыть соответствующие элементы, плавно уменьшая их прозрачность.

• версия добавлена: 1.0.fadeOut( [duration ] [, complete ] )

  • duration (по умолчанию: 400)
    Тип: Число или Строка
    Строка или число, определяющее, как долго будет выполняться анимация.
  • complete
    Тип: Функция()
    Функция, вызываемая после завершения анимации, вызывается один раз на каждый соответствующий элемент.

• версия добавлена: 1.0.fadeOut( options )

  • options
    Тип: Объект
    Карта дополнительных параметров, передаваемых в метод.
    • duration (по умолчанию: 400)
      Тип: Число или Строка
      Строка или число, определяющее, как долго будет выполняться анимация.
    • easing (по умолчанию: swing)
      Тип: Строка
      Строка, указывающая, какую функцию плавного изменения использовать для перехода.
    • queue (по умолчанию: true)
      Тип: Булево значение или Строка
      Булево значение, указывающее, следует ли размещать анимацию в очереди эффектов. Если false, анимация начнется немедленно. С jQuery 1.7, параметр queue также может принимать строку, в этом случае анимация добавляется в очередь, представленную этой строкой. Когда используется имя пользовательской очереди, анимация не запускается автоматически; для ее запуска необходимо вызвать .dequeue("queuename").
    • specialEasing
      Тип: Объект
      Объект, содержащий одну или несколько CSS-свойств, определенных параметром properties, и соответствующие им функции плавного изменения. (версия добавлена: 1.4)
    • step
      Тип: Функция( Число now, Tween tween )
      Функция, вызываемая для каждой анимированной свойства каждого анимированного элемента. Эта функция предоставляет возможность изменить объект Tween, чтобы изменить значение свойства перед его установкой.
    • progress
      Тип: Функция( Promise animation, Число progress, Число remainingMs )
      Функция, вызываемая после каждого шага анимации, только один раз на каждый анимированный элемент независимо от количества анимированных свойств. (версия добавлена: 1.8)
    • complete
      Тип: Функция()
      Функция, которая вызывается после завершения анимации элемента.
    • start
      Тип: Функция( Promise animation )
      Функция, вызываемая при начале анимации элемента. (версия добавлена: 1.8)
    • done
      Тип: Функция( Promise animation, Булево значение jumpedToEnd )
      Функция, которая вызывается при завершении анимации элемента (объект Promise разрешен). (версия добавлена: 1.8)
    • fail
      Тип: Функция( Promise animation, Булево значение jumpedToEnd )
      Функция, которая вызывается, когда анимация элемента не завершается (объект Promise отклонен). (версия добавлена: 1.8)
    • always
      Тип: Функция( Promise animation, Булево значение jumpedToEnd )
      Функция, которая вызывается, когда анимация элемента завершается или останавливается без завершения (объект Promise либо разрешен, либо отклонен). (версия добавлена: 1.8)

• версия добавлена: 1.4.3.fadeOut( [duration ] [, easing ] [, complete ] )

  • duration (по умолчанию: 400)
    Тип: Число или Строка
    Строка или число, определяющее, как долго будет выполняться анимация.
  • easing (по умолчанию: swing)
    Тип: Строка
    Строка, указывающая, какую функцию плавного изменения использовать для перехода.
  • complete
    Тип: Функция()
    Функция, вызываемая после завершения анимации, вызывается один раз на каждый соответствующий элемент.

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

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

Мы можем анимировать любой элемент, такой как простое изображение:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

При условии, что элемент изначально показан, мы можем скрыть его медленно:

$( "#clickme" ).on( "click", function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

Примечание: Чтобы избежать ненужных манипуляций с DOM, .fadeOut() не будет скрывать элемент, который уже считается скрытым. Сведения об элементах, которые jQuery считает скрытыми, см. в :hidden Selector.

Плавное изменение

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

Функция обратного вызова

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

Начиная с jQuery 1.6, метод .promise() может использоваться совместно с методом deferred.done() для выполнения одного обратного вызова для всей анимации, когда все соответствующие элементы завершили свою анимацию (см. пример для .promise() в примере).

Дополнительные заметки:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  p {
    font-size: 150%;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>
  If you click on this paragraph
  you'll see it just fade away.
</p>
 
<script>
$( "p" ).on( "click", function() {
  $( "p" ).fadeOut( "slow" );
});
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  span {
    cursor: pointer;
  }
  span.hilite {
    background: yellow;
  }
  div {
    display: inline;
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<h3>Find the modifiers - <div></div></h3>
<p>
  If you <span>really</span> want to go outside
  <span>in the cold</span> then make sure to wear
  your <span>warm</span> jacket given to you by
  your <span>favorite</span> teacher.
</p>
 
<script>
$( "span" ).on( "click", function() {
  $( this ).fadeOut( 1000, function() {
    $( "div" ).text( "'" + $( this ).text() + "' has faded!" );
    $( this ).remove();
  });
});
$( "span" ).hover(function() {
  $( this ).addClass( "hilite" );
}, function() {
  $( this ).removeClass( "hilite" );
});
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  .box,
  button {
    float: left;
    margin: 5px 10px 5px 0;
  }
  .box {
    height: 80px;
    width: 80px;
    background: #090;
  }
  #log {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button id="btn1">fade out</button>
<button id="btn2">show</button>
 
<div id="log"></div>
 
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
 
<script>
$( "#btn1" ).on( "click", function() {
  function complete() {
    $( "<div>" ).text( this.id ).appendTo( "#log" );
  }
  $( "#box1" ).fadeOut( 1600, "linear", complete );
  $( "#box2" ).fadeOut( 1600, complete );
});
 
$( "#btn2" ).on( "click", function() {
  $( "div" ).show();
  $( "#log" ).empty();
});
</script>
 
</body>
</html>