ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
jQuery. Уроки для начинающих

jQuery Эффекты - Затухание (исчезновение/появление)


С помощью jQuery вы можете сделать элементы затухающими в зоне и вне зоны видимости.

Нажмите для появления/исчезновения панели

Поскольку время ценно, мы быстро и легко обучаемся.

В W3Schools вы можете изучить все, что вам нужно, в доступном и удобном формате.


Примеры

jQuery fadeIn()
Демонстрирует метод jQuery fadeIn().

jQuery fadeOut()
Демонстрирует метод jQuery fadeOut().

jQuery fadeToggle()
Демонстрирует метод jQuery fadeToggle().

jQuery fadeTo()
Демонстрирует метод jQuery fadeTo().


jQuery Методы затухания

С помощью jQuery вы можете сделать затухающий элемент видимым и скрытым.

jQuery имеет следующие методы затухания:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Метод jQuery fadeIn()

Метод jQuery fadeIn() используется для исчезновения скрываемого элемента.

Синтаксис:

$(selector).fadeIn(speed,callback);

Необязательный параметр скорости (speed) определяет продолжительность эффекта. Может принимать следующие значения: "slow" (медленно), "fast" (быстро) или миллисекунды.

Необязательный параметр обратного вызова (callback) - это функция, которая будет выполняться после завершения затухания.

В следующем примере демонстрируется метод fadeIn() с разными параметрами:

Пример

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});
Попробуйте сами »

Метод jQuery fadeOut()

Метод jQuery fadeOut() используется для исчезновения видимого элемента.

Синтаксис:

$(selector).fadeOut(speed,callback);

Необязательный параметр скорости определяет продолжительность эффекта. Может принимать следующие значения: "slow" (медленно), "fast" (быстро) или миллисекунды.

Необязательный параметр обратного вызова - это функция, которая будет выполняться после завершения затухания.

В следующем примере демонстрируется метод fadeOut() с разными параметрами:

Пример

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
Попробуйте сами »

Метод jQuery fadeToggle()

Метод jQuery fadeToggle() переключает между методами fadeIn() и fadeOut().

Если элементы затухают, fadeToggle() сделает затухание постепенным.

Если элементы появляются, fadeToggle() сделает появление постепенным.

Синтаксис:

$(selector).fadeToggle(speed,callback);

Необязательный параметр скорости определяет продолжительность эффекта. Может принимать следующие значения: "slow" (медленно), "fast" (быстро) или миллисекунды.

Необязательный параметр обратного вызова - это функция, которая будет выполняться после завершения затухания.

В следующем примере демонстрируется метод fadeToggle() с разными параметрами:

Пример

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
Попробуйте сами »

Метод jQuery fadeTo()

Метод jQuery fadeTo() позволяет плавно переходить к заданной непрозрачности (значение от 0 до 1).

Синтаксис:

$(selector).fadeTo(speed,opacity,callback);

Обязательный параметр скорости (speed) определяет продолжительность эффекта. Может принимать следующие значения: "slow" (медленно), "fast" (быстро) или миллисекунды.

Обязательный параметр непрозрачности (opacity) в методе fadeTo() указывает переход к заданной непрозрачности (значение от 0 до 1).

Необязательный параметр обратного вызова (callback) - это функция, которая будет выполняться после завершения функции.

В следующем примере демонстрируется метод fadeTo() с разными параметрами:

Пример

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});
Попробуйте сами »

jQuery Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте метод jQuery, чтобы элемент <div> стал затухающим.

$("div").();


Справочник jQuery эффектов

Чтобы получить полный обзор всех эффектов jQuery, перейдите на Справочник jQuery эффектов на нашем сайте W3Schools на русском.