Pro jQuery

Адам Фриман

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

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

Методы fadeOut, fadeIn и fadeToggle соответствуют другим методам для создания эффектов. В них можно добавить время действия эффекта, функцию ослабления и функцию обратного вызова, как и в предыдущих примерах. В листинге 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.

<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.

<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: Изменение прозрачности до определенного значения

Подписаться

или RSS канал: