.fadeIn()

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

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

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

• версия добавлена: 1.0.fadeIn( 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.fadeIn( [duration ] [, easing ] [, complete ] )

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

Метод .fadeIn() анимирует непрозрачность совпадающих элементов. Он похож на метод .fadeTo(), но этот метод не скрывает элемент и может указать конечный уровень непрозрачности.

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

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

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
 
// With the element initially hidden, we can show it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

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

Начиная с 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>fadeIn demo</title>
  <style>
  span {
    color: red;
    cursor: pointer;
  }
  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
 
<script>
$( document.body ).on( "click", function() {
  $( "div:hidden" ).first().fadeIn( "slow" );
} );
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn demo</title>
  <style>
  p {
    position: relative;
    width: 400px;
    height: 90px;
  }
  div {
    position: absolute;
    width: 400px;
    height: 65px;
    font-size: 36px;
    text-align: center;
    color: yellow;
    background: red;
    padding-top: 25px;
    top: 0;
    left: 0;
    display: none;
  }
  span {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>
  Let it be known that the party of the first part
  and the party of the second part are henceforth
  and hereto directed to assess the allegations
  for factual correctness... (<a href="#">click!</a>)
  <div><span>CENSORED!</span></div>
</p>
 
<script>
$( "a" ).on( "click", function() {
  $( "div" ).fadeIn( 3000, function() {
    $( "span" ).fadeIn( 100 );
  });
  return false;
});
</script>
 
</body>
</html>