Главная страница   /   10.3. Использование эффектов исчезновения (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

10.3. Использование эффектов исчезновения

Методы для создания эффектов исчезновения показывают и прячут элементы путем уменьшения их затененности (или, если хотите, увеличения их прозрачности). Методы для создания эффектов исчезновения описаны в таблице 10-5.

Таблица 10-5: Методы для создания эффектов исчезновения
Метод Описание
fadeOut()
fadeOut(timespan)
fadeOut(timespan, function)
fadeOut(timespan, easing, function)
Прячет элементы путем увеличения их прозрачности
fadeIn()
fadeIn(timespan)
fadeIn(timespan, function)
fadeIn(timespan, easing, function)
Показывает элементы путем уменьшения их прозрачности
fadeTo(timespan, opacity)
fadeTo(timespan, opacity, easing, function)
Меняет прозрачность до определенной степени
fadeToggle()
fadeToggle(timespan)
fadeToggle(timespan, function)
fadeToggle(timespan, easing, function)
Переключает видимость элементов путем увеличения и уменьшения их прозрачности

Методы fadeOut, fadeIn и fadeToggle соответствуют другим методам для создания эффектов. В них можно добавить время действия эффекта, функцию ослабления и функцию обратного вызова, как и в предыдущих примерах. В листинге 10-9 показано, как использовать методы для создания эффектов исчезновения.

Листинг 10-9: Показ и скрытия элементов при помощи эффекта исчезновения
<script type="text/javascript">
	$(document).ready(function () {
		$("<button>Toggle</button>").insertAfter("#buttonDiv button")
			.click(function (e) {
				$('img').fadeToggle();
				e.preventDefault();
			});
	});
</script>

В документе я применил метод fadeToggle для элементов img, в частности, чтобы продемонстрировать один из недостатков этого эффекта. На рисунке 10-9 показано, что происходит, когда вы скрываете элементы.

Рисунок 10-9: Использование эффекта исчезновения

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

Плавный переход до определенной степени прозрачности

Можно использовать метод fadeTo, чтобы элементы плавно переходили к определенной степени прозрачности. Значения прозрачности варьируют в диапазоне от 0 (абсолютная прозрачность) до 1 (полное затемнение). Сам элемент остается на экране, поэтому можно избежать смещения верстки, о которой я говорил ранее. В листинге 10-10 показано использование метода fadeTo.

Листинг 10-10: Плавный переход до определенной степени прозрачности
<script type="text/javascript">
	$(document).ready(function () {
		$("<button>Fade</button>").insertAfter("#buttonDiv button")
			.click(function (e) {
				$('img').fadeTo("fast", 0);
				e.preventDefault();
			});
	});
</script>

В этом примере я указал, что элементы должны постепенно блекнуть, пока полностью не станут прозрачными. Это приводит к тому же результату, что и при использовании метода fadeOut, но в конце перехода элементы не спрятаны. Результат показан на рисунке 10-10.

Рисунок 10-10: Изменение прозрачности при помощи метода fadeTo

При создании этого эффекта не обязательно использовать пограничные значения. Можно также указывать средние значения, как показано в листинге 10-11.

Листинг 10-11: Изменение прозрачности до определенного значения
<script type="text/javascript">
	$(document).ready(function () {
		$("<button>Fade</button>").insertAfter("#buttonDiv button")
			.click(function (e) {
				$('img').fadeTo("fast", 0.4);
				e.preventDefault();
			});
	});
</script>

Результат можно увидеть на рисунке 10-11.

Рисунок 10-11: Изменение прозрачности до определенного значения