Pro jQuery
Адам Фриман
Включение и выключение анимаций
Можно выключить анимацию эффектов, если установить значение свойства $.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
, как было ранее описано в этой главе.