Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Изменение прозрачности элемента
Для изменения прозрачности элементов предназначены следующие методы.
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 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов