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

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

  • fadeIn() — показывает элемент, изменяя его прозрачность. Форматы метода:
fadeIn([<Продолжительность>, ][<Функция обратного вызова>])
fadeIn(<Продолжительность>[, <Закон анимации>][,
       <Функция обратного вызова>])
fadeIn(<Объект с опциями>)
  • fadeOut() — скрывает элемент, изменяя его прозрачность. Форматы метода:
fadeOut([<Продолжительность>, ][<Функция обратного вызова>])
fadeOut(<Продолжительность>[, <Закон анимации>][,
        <Функция обратного вызова>])
fadeOut(<Объект с опциями>)

Пример сокрытия и отображения первого абзаца при щелчке на кнопке:

<p>Абзац</p>
<input type="button" value="Скрыть абзац" id="btn1">
<input type="button" value="Отобразить абзац" id="btn2">
$('#btn1').click( function() {
   $('p').first().fadeOut(400);
});
$('#btn2').click( function() {
   $('p').first().fadeIn(400);
});
  • fadeToggle() — позволяет чередовать сокрытие и отображение элементов (путем изменения прозрачности). Если элемент скрыт, то он будет отображен, и наоборот. Форматы метода:
fadeToggle([<Продолжительность>, ][<Функция обратного вызова>])
fadeToggle(<Продолжительность>[, <Закон анимации>][,
           <Функция обратного вызова>])
fadeToggle(<Объект с опциями>)

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

<p>Абзац</p>
<input type="button" value="Скрыть или отобразить абзац"
       id="btn1">
$('#btn1').click( function() {
   $('p').first().fadeToggle(400);
});
  • fadeTo() — позволяет изменить степень прозрачности элемента. Формат метода:
fadeTo(<Продолжительность>, <Прозрачность>[, <Закон анимации>][,
       <Функция обратного вызова>])

Во втором параметре может быть указано вещественное число от 0 до 1 включительно, задающее степень непрозрачности.

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

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

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

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

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

Если параметр <Продолжительность> не указан, то по умолчанию используется значение 400 миллисекунд. Рассмотрим пример:

<div id="div1" class="bg-success text-white"
     style="width: 500px; height: 150px; display: none;">
   Скрытый элемент
</div>
<input type="button" value="Отобразить" id="btn1">
<input type="button" value="Скрыть" id="btn2">

$('#btn1').click( function() {
   $('#div1').fadeIn(4000);
});
$('#btn2').click( function() {
   $('#div1').fadeOut(4000);
});

В параметре <Закон анимации> можно указать значения swing (значение по умолчанию) и linear (равномерное изменение на всем протяжении действия) в виде строки. Пример указания значения linear:

$('#div1').fadeToggle('slow', 'linear');

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

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

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

<div class="bg-info" style="width: 100px; height: 100px;"></div><br>
<div class="bg-dark" style="width: 100px; height: 100px;"></div>

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

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

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

В параметре <Объект с опциями> можно указать объект с настройками (см. разд. 2.1.2):

<p>Абзац</p>
<input type="button" value="Скрыть или отобразить абзац"
       id="btn1">

$('#btn1').click( function() {
   $('p').first().fadeToggle({
      duration: 1000,
      easing: 'linear',
      complete: function() {
         console.log('Анимация завершена');
      }
   });
});

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

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