jQuery метод .fadeIn()

Определение и применение

jQuery метод .fadeIn() позволяет плавно изменить прозрачность для отдельных элементов (из скрытого состояния в видимое). Другими словами, метод производит анимацию изменения прозрачности выбранных элементов плавно переводя их из скрытого состояния в видимое.

jQuery синтаксис:

Код

Синтаксис 1.0:
$( selector ).fadeIn() // метод используется без параметров

$( selector ).fadeIn( duration, complete ) 

duration - Number, или String
complete - Function

$( selector ).fadeIn( { options } ) // option: value (описание ниже)

options - PlainObject

Синтаксис 1.4.3:
$( selector ).fadeIn( duration, easing, complete ) 

duration - Number, или String
easing - String
complete - Function

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4)

Значения параметров

Параметр	Описание
duration	Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова 'fast' и 'slow' соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easing	Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Без использования внешних плагинов имеет только два значения - linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). *Значение по умолчанию swing.*
complete	Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
options	duration (по умолчанию: 400). Тип: Number, или String. Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше). easing (по умолчанию: swing). Тип: String. Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше). queue (по умолчанию: true). Тип: Boolean, или String. Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( "имя очереди" ), чтобы запустить её. specialEasing. Тип: PlainObject. Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4. step. Тип: Function( Number now, Tween tween ). Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено. progress. Тип: Function. Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8. complete. Тип: Function. Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше). start. Тип: Function (Promise Object animation). Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8. done. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8. fail. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8. always. Тип: Function (Promise Object animation, Boolean jumpedToEnd). Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

Пример использования

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery методов .fadeOut() и .fadeIn() (без параметров)</title>
    <style>
      div {
        display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
        width: 75px; /* ширина элемента */
        height: 150px; /* высота элемента */
        margin-right: 20px; /* внешний отступ справа */
        background-color: green; /* цвет заднего фона */
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".out").click(function () {
          // задаем функцию при нажатиии на элемент с классом out
          $("div").fadeOut(); // плавно изменяя прозрачность скрываем все элементы <div>
        });
        $(".in").click(function () {
          // задаем функцию при нажатиии на элемент с классом in
          $("div").fadeIn(); // плавно изменяя прозрачность отображаем все элементы <div>
        });
      });
    </script>
  </head>
  <body>
    <button class="out">Метод .fadeOut()</button>
    <button class="in">Метод .fadeIn()</button>
    <hr />
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

В этом примере с использованием jQuery метода .fadeIn() мы при нажатии на определенную кнопку, плавно изменяя прозрачность отображаем все элементы <div> в документе, а с использованием метода .fadeOut() плавно изменяя прозрачность скрываем все элементы <div> в документе.

Пример использования jQuery методов .fadeOut() и .fadeIn() (без параметров): попробуйте сами

index.html

HTML

<button class="out">Метод .fadeOut()</button><button class="in">Метод .fadeIn()</button>
<hr />
<div></div>
<div></div>
<div></div>

main.js

JavaScript

$(document).ready(function () {
  $(".out").click(function () {
    $("div").fadeOut();
  });
  $(".in").click(function () {
    $("div").fadeIn();
  });
});

style.css

CSS


div{
	display: inline-block;
	width: 75px;
	height: 150px;
	margin-right: 20px;
	background-color: green;
}

Результат нашего примера:

Пример использования jQuery методов .fadeOut() и .fadeIn() (без параметров). — Пример использования jQuery методов .fadeOut() и .fadeIn() (без параметров)

Рассмотрим следующий пример в котором зададим методам .fadeIn() и .fadeOut() различные значения продолжительности анимации:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery методов .fadeOut() и .fadeIn() (различная скорость анимации)</title>
    <style>
      div {
        display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
        width: 75px; /* ширина элемента */
        height: 150px; /* высота элемента */
        margin-right: 20px; /* внешний отступ справа */
        background-color: plum; /* цвет заднего фона */
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".out").click(function () {
          // задаем функцию при нажатиии на элемент с классом out
          $("div:first").fadeOut("slow"); // плавно изменяя прозрачность скрывааем первый элемент <div> в документе
          $("div:nth-of-type(2)").fadeOut(1000); // плавно изменяя прозрачность скрывааем второй элемент <div> в документе
          $("div:last").fadeOut("fast"); // плавно изменяя прозрачность скрывааем последний элемент <div> в документе
        });
        $(".in").click(function () {
          // задаем функцию при нажатиии на элемент с классом in
          $("div:first").fadeIn("slow"); // плавно изменяя прозрачность отображаем первый элемент <div> в документе
          $("div:nth-of-type(2)").fadeIn(1000); // плавно изменяя прозрачность отображаем второй элемент <div> в документе
          $("div:last").fadeIn("fast"); // плавно изменяя прозрачность отображаем последний элемент <div> в документе
        });
      });
    </script>
  </head>
  <body>
    <button class="out">Метод .fadeOut()</button>
    <button class="in">Метод .fadeIn()</button>
    <hr />
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

В этом примере с использованием jQuery методов .fadeIn() и .fadeOut() мы при нажатии на определенную кнопку плавно изменяя прозрачность скрываем, либо отображаем все элементы <div> в документе. При этом первый элемент <div> скрывается, или отображается за 600 миллисекунд (ключевое слово 'slow'), второй элемент за 1000 миллисекунд, а третитй за 200 миллисекунд (ключевое слово 'fast').

Пример использования jQuery методов .fadeOut() и .fadeIn() (различная скорость анимации): попробуйте сами

index.html

HTML

<button class="out">Метод .fadeOut()</button><button class="in">Метод .fadeIn()</button>
<hr />
<div></div>
<div></div>
<div></div>

main.js

JavaScript

$(document).ready(function () {
  $(".out").click(function () {
    $("div:first").fadeOut("slow");
    $("div:nth-of-type(2)").fadeOut(1000);
    $("div:last").fadeOut("fast");
  });
  $(".in").click(function () {
    $("div:first").fadeIn("slow");
    $("div:nth-of-type(2)").fadeIn(1000);
    $("div:last").fadeIn("fast");
  });
});

style.css

CSS


div{
	display: inline-block;
	width: 75px;
	height: 150px;
	margin-right: 20px;
	background-color: plum;
}

Результат нашего примера:

Пример использования jQuery методов .fadeOut() и .fadeIn() (различная скорость анимации).

Рассмотрим следующий пример в котором зададим методам .fadeIn() и .fadeOut() не только продолжительность анимации, но и укажем скорость анимации и функцию, которая будет выполнена после завершения анимации:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery методов .fadeOut() и .fadeIn() (с callback функцией)</title>
    <style>
      div {
        display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
        width: 75px; /* ширина элемента */
        height: 150px; /* высота элемента */
        margin-right: 20px; /* внешний отступ справа */
        background-color: red; /* цвет заднего фона */
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".out").click(function () {
          // задаем функцию при нажатиии на элемент с классом out
          $("div").fadeOut(500, "linear", function () {
            // плавно изменяя прозрачность скрывааем элементы <div> в документе
            $(".status").text("Элементы исчезли"); // добавляем текстовую информации в элемент с классом status
          });
        });
        $(".in").click(function () {
          // задаем функцию при нажатиии на элемент с классом in
          $("div").fadeIn(500, "linear", function () {
            // плавно изменяя прозрачность отображаем элементы <div> в документе
            $(".status").text("Элементы появились"); // добавляем текстовую информации в элемент с классом status
          });
        });
      });
    </script>
  </head>
  <body>
    <button class="out">Метод .fadeOut()</button>
    <button class="in">Метод .fadeIn()</button>
    <hr />
    <div></div>
    <div></div>
    <div></div>
    <p class="status"></p>
  </body>
</html>

В этом примере с использованием jQuery методов .fadeIn() и .fadeOut() мы при нажатии на определенную кнопку плавно изменяя прозрачность скрываем, либо отображаем все элементы <div> в документе. При этом мы указали для наших методов продолжительность анимации равную пол секунды (500 миллисекунд), эффект анимации происходит с одинаковой скоростью от начала до конца (linear) и функцию, которая после завершения анимации находит элемент с классом status и добавляет текстовую информацию (jQuery метод .text()).

Пример использования jQuery методов .fadeOut() и .fadeIn() (с callback функцией): попробуйте сами

index.html

HTML

<button class="out">Метод .fadeOut()</button><button class="in">Метод .fadeIn()</button>
<hr />
<div></div>
<div></div>
<div></div>
<p class="status"></p>

main.js

JavaScript

$(document).ready(function () {
  $(".out").click(function () {
    $("div").fadeOut(500, "linear", function () {
      $(".status").text("Элементы исчезли");
    });
  });
  $(".in").click(function () {
    $("div").fadeIn(500, "linear", function () {
      $(".status").text("Элементы появились");
    });
  });
});

style.css

CSS


div{
	display: inline-block;
	width: 75px;
	height: 150px;
	margin-right: 20px;
	background-color: red;
}

Результат нашего примера:

Пример использования jQuery методов .fadeOut() и .fadeIn() (с callback функцией).

Рассмотрим следующий пример в котором передадим в качестве параметра методов .fadeIn() и .fadeOut() объект, содержащий различные опции, которые будут контролировать анимацию:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title
      >Использование jQuery методов .fadeOut() и .fadeIn() (объект с опциями в качестве
      параметра)</title
    >
    <style>
      div {
        display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
        width: 75px; /* ширина элемента */
        height: 150px; /* высота элемента */
        margin-right: 20px; /* внешний отступ справа */
        background-color: orangered; /* цвет заднего фона */
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".out").click(function () {
          // задаем функцию при нажатиии на элемент с классом out
          $("div").fadeOut({
            // плавно изменяя прозрачность скрывааем элементы <div> в документе
            duration: 800, // продолжительность анимации
            easing: "linear", // скорость анимации
            complete: function () {
              // callback
              $(".status").text("Элементы исчезли"); // добавляем текстовую информации в элемент с классом status
            },
            queue: false, // не ставим в очередь
          });
        });
        $(".in").click(function () {
          // задаем функцию при нажатиии на элемент с классом in
          $("div").fadeIn({
            // плавно изменяя прозрачность отображаем элементы <div> в документе
            duration: 800, // продолжительность анимации
            easing: "linear", // скорость анимации
            complete: function () {
              // callback
              $(".status").text("Элементы появились"); // добавляем текстовую информации в элемент с классом status
            },
            queue: false, // не ставим в очередь
          });
        });
      });
    </script>
  </head>
  <body>
    <button class="out">Метод .fadeOut()</button>
    <button class="in">Метод .fadeIn()</button>
    <hr />
    <div></div>
    <div></div>
    <div></div>
    <p class="status"></p>
  </body>
</html>

продолжительность анимации равную 800 миллисекунд (duration: 800)
эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
функция, которая после завершения анимации находит элемент с классом status и добавляет текстовую информацию (complete: function).
анимация не размещается в очереди эффектов (queue: false).

Пример использования jQuery методов .fadeOut() и .fadeIn() (объект с опциями в качестве параметра): попробуйте сами

index.html

HTML

<button class="out">Метод .fadeOut()</button><button class="in">Метод .fadeIn()</button>
<hr />
<div></div>
<div></div>
<div></div>
<p class="status"></p>

main.js

JavaScript

$(document).ready(function () {
  $(".out").click(function () {
    $("div").fadeOut({
      duration: 800,
      easing: "linear",
      complete: function () {
        $(".status").text("Элементы исчезли");
      },
      queue: false,
    });
  });
  $(".in").click(function () {
    $("div").fadeIn({
      duration: 800,
      easing: "linear",
      complete: function () {
        $(".status").text("Элементы появились");
      },
      queue: false,
    });
  });
});

style.css

CSS


div{
	display: inline-block;
	width: 75px;
	height: 150px;
	margin-right: 20px;
	background-color: orangered;
}

Результат нашего примера:

Пример использования jQuery методов .fadeOut() и .fadeIn() (объект с опциями в качестве параметра).