|
|
Синтаксис и описание:
Добавлено в jQuery 1.3jQuery.fx.offСвойство jQuery.fx.off глобально отключает визуальную часть всех анимационных эффектов jQuery. Если установить его в true до запуска анимаций, методы вроде .animate(), .fadeIn(), .hide() с длительностью будут сразу применять конечное состояние — без промежуточных кадров, но с сохранением очереди и вызовом колбэков complete.
Возвращаемое значение: (boolean — логическое значение) Значение свойства; по умолчанию false.
Примечание: Официально названные причины использовать jQuery.fx.off: работа на маломощных устройствах, где анимация ощутимо нагружает рендеринг, и проблемы с доступностью у пользователей, которым мешают движущиеся элементы интерфейса. Примечание: Удобное практическое применение — автотесты интерфейса: включённые анимации превращают синхронные проверки состояния DOM в гонку с таймерами. Установка jQuery.fx.off = true в начале тестового прогона убирает эту гонку, при этом колбэки complete всё равно срабатывают. Примечание: Само свойство не связано с медиазапросом prefers-reduced-motion автоматически — это нужно связать вручную, например через matchMedia, чтобы уважать системную настройку пользователя «уменьшить анимацию»:
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
function applyMotionPreference(mql) {
jQuery.fx.off = mql.matches;
}
applyMotionPreference(reduceMotion);
reduceMotion.addEventListener('change', applyMotionPreference);
В jQuery 3.x и 4.0: jQuery.fx.off не деприкейчен и продолжает работать в 3.7.1 и 4.0. А вот соседнее свойство jQuery.fx.interval (задержка между кадрами анимации, по умолчанию 13 мс) в jQuery 4.0 удалено — оно опиралось на устаревший подход через setInterval вместо requestAnimationFrame и в современных браузерах было не нужно. Если в старом коде проекта есть обращения к jQuery.fx.interval, при переходе на 4.0 их нужно убрать — свойство просто перестанет существовать (не вызовет ошибку, но и не будет иметь эффекта). Другие изменения версии 4.0 — в статье jQuery 4.0: что изменилось.
Примеры:
Отключить все анимации на время автотестов.
// В начале тестового сценария
jQuery.fx.off = true;
$('#modal').fadeIn(400); // применится мгновенно, но complete всё равно сработает
Учитывать системную настройку уменьшения анимации.
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
jQuery.fx.off = reduceMotion.matches;
[ наверх ]
|
|
