Изменение прозрачности элемента

Для изменения прозрачности элементов предназначены следующие методы.

  • fadeIn([<Продолжительность>[, <Функция обратного вызова>]]) — показывает элемент, изменяя его прозрачность.
  • fadeOut([<Продолжительность>[, <Функция обратного вызова>]]) — скрывает элемент, изменяя его прозрачность.
  • fadeTo(<Продолжительность>, <Прозрачность>[, <Функция обратного вызова>]) — позволяет изменить степень прозрачности элемента. Во втором параметре может быть указано вещественное число от 0 до 1 включительно.

Сделаем изображение вначале полупрозрачным. При наведении указателя мыши полностью "проявим" изображение, а как только указатель выйдет за его пределы, установим значение прозрачности равным 0.4.

$("#img1").css("opacity", 0.4).hover(
   function() {
      $(this).stop().fadeTo(600, 1);
   },
   function() {
      $(this).stop().fadeTo(600, 0.4);
   }
);
<img src="img.gif" id="img1">

Обратите внимание на метод stop(). С его помощью мы досрочно прерываем анимацию. Это позволяет избежать неприятных эффектов при слишком быстром перемещении указателя мыши.

В параметре <Продолжительность> указывается время выполнения анимации в миллисекундах или следующие значения:

  • fast — 200 миллисекунд;
  • normal — 400 миллисекунд;
  • slow — 600 миллисекунд.

Рассмотрим пример.

$("#btn1").click(function() {
   $("div").fadeIn(4000);
});
$("#btn2").click(function() {
   $("div").fadeOut(4000);
});
<div style="width:500px;height:150px;
            background-color:green;display:none;">
Текст</div>
<input type="button" value="Отобразить" id="btn1">
<input type="button" value="Скрыть" id="btn2">

В параметре <Функция обратного вызова> может быть указана функция, которая будет вызвана после окончания анимации. Указывается ссылка на функцию следующего формата.

function <Название функции>() {
   // ...
}

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

$("div").mouseover(function() {
   $(this).fadeOut(200, function() {
      $(this).fadeIn(600);
   });
});
<div style="width:100px;height:100px;background-color:black;">
</div><br>
<div style="width:100px;height:100px;background-color:black;"></div>

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

$("div").mouseover(function() {
   $(this).fadeOut(200).fadeIn(600);
});

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе