Методы изменения прозрачности элемента

Для изменения прозрачности элементов предназначены следующие методы.
• fadeln([<Продолжительность>[, <Функция обратного вызова>]\) - показывает элемент, изменяя его прозрачность.


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

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

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

$("#imgl").сss("opacity", 0.4).hover( function() {
$(this).stopO .fadeTo(600, 1) ;
});

• function() {
$(this).stop().fadeTo(600, 0.4) ;
}

<img src="img.gif" id="imgl">

Обратите внимание на метод stop (). С его помощью мы досрочно прерываем анимацию. Это позволяет избежать неприятных эффектов при слишком быстром перемещении курсора. В параметре <Продолжительность> указывается время выполнения анимации в миллисекундах или следующие значения:
• fast — 200 миллисекунд;
• normal — 400 миллисекунд;
• slow — 600 миллисекунд.

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

$("#btnl").click(function() {
$("div").fadeIn(4000);
});

$("#btn2").click(function() {
$("div").fadeOut(4000);
});

<div style="width:5OOpx;height:15Opx;background-color:green;display:none;">Текст</div>
<input type="button" value="Отобразить" id="btnl">
<input type="button" value="Скрыть" id="btn2">

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

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

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

<div style="width:10Opx;height:10Opx;background-color:black;"> </div><br>
<div style="width:100px;height:100px;background-color:black;">

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *