Эффект "Затемнение"

При помощи библиотеки jQuery можно создать визуальный эффект, когда элемент будет уходить в затемнение или выходить из затемнения за счет плавного изменения прозрачности.

Нажмите, чтобы открыть/закрыть панель

Так как время дорого, мы предоставляем учебные материалы быстро и без задержек.

На нашем сайте вы найдете самые разнообразные учебные материалы в удобном формате.

jQuery методы, создающие эффект затемнения

В jQuery есть следующие методы, создающие эффект затемнения:

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

jQuery метод fadeIn()

jQuery метод fadeIn() используется, чтобы "увести" элемент в затемнение.

Синтаксис:


$(селектор).fadeIn(speed,callback);

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

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

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


$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

jQuery метод fadeOut()

jQuery метод fadeOut() используется, чтобы "вывести" элемент из затемнения.

Синтаксис:


$(селектор).fadeOut(speed,callback);

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

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

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


$("button").click(function(){
   $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery метод fadeToggle()

jQuery метод fadeToggle() переключает между эффектами, создаваемыми методами fadeIn() и fadeOut().

Если элемент видим, то fadeToggle() "уводит" его в затемнение.

Если элемент скрыт, то fadeToggle() "выводит" его из затемнения.

Синтаксис:


$(селектор).fadeToggle(speed,callback);

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

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

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


$("button").click(function(){
   $("#div1").fadeToggle();
   $("#div2").fadeToggle("slow");
   $("#div3").fadeToggle(3000);
});

jQuery метод fadeTo()

jQuery метод fadeTo() плавно изменяет прозрачность элемента (значение между 0 и 1).

Синтаксис:


$(селектор).fadeTo(speed,opacity,callback);

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

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

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

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


$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
   $("#div3").fadeTo("slow", 0.7);
});