Главная страница   /   10.6. Включение и выключение анимаций (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

10.6. Включение и выключение анимаций

Можно выключить анимацию эффектов, если установить значение свойства $.fx.off на true, как показано в листинге 10-21.

Листинг 10-21: Выключение анимации
<script type="text/javascript">
	$(document).ready(function () {

		$.fx.off = true;

		$('form').css({ "position": "fixed", "top": "70px", "z-index": "2" });
		$('h1').css({ "position": "fixed", "z-index": "1", "min-width": "0" });
		var timespan = "slow";
		cycleEffects();
		function cycleEffects() {
			$('h1').animate({ left: "+=100" }, timespan)
				.delay(500)
				.animate({ left: "-=100" }, timespan)
				.delay(500)
				.queue(function (nextFunction) {
					$('img').fadeTo(timespan, 0).fadeTo(timespan, 1);
					nextFunction();
				})
				.delay(500)
				.animate({ height: 223, width: 700 }, timespan)
				.delay(500)
				.animate({ height: 30, width: 500 }, timespan)
				.delay(500)
				.slideUp(timespan)
				.delay(500)
				.slideDown(timespan, setTimeout(cycleEffects, 1));
		}
	});
</script>

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