如何使用jQuery检测用户是否开启Reduce Motion并自动关闭网页动画？

无障碍访问是现代Web开发中容易被忽视的一环。不少用户因为前庭功能紊乱、晕动症或视觉敏感，会在系统层面开启“减弱动态效果”（Reduce Motion）选项。如果页面依然播放大面积位移、缩放或视差动画，这些用户可能会感到头晕、恶心。本文介绍如何用jQuery配合浏览器提供的原生能力，检测用户是否启用了Reduce Motion，并据此关闭或简化页面动画。

一、理解prefers-reduced-motion媒体查询的原理

检测Reduce Motion的核心不是jQuery本身，而是CSS Level 5引入的媒体特性prefers-reduced-motion。这个媒体查询会读取操作系统层面的辅助功能设置：在Windows中对应“显示动画效果”开关，在macOS和iOS中对应“减弱动态效果”，在Android中对应“移除动画”。浏览器会把这些系统状态暴露给网页，取值有两个：no-preference表示用户没有特殊要求，reduce表示用户明确希望减少动画。

最基础的做法是直接在CSS里写媒体查询，把动画时长归零或直接禁用动画：

/* 默认样式：带过渡动画 */
.box {
    transition: transform 0.5s ease;
}
.box:hover {
    transform: scale(1.1);
}

/* 用户开启Reduce Motion时：关闭所有动画与过渡 */
@media (prefers-reduced-motion: reduce) {
    .box,
    .box:hover {
        transform: none;
        transition: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

注意上面的写法：把时长设为0.01ms而不是0，是因为某些浏览器在时长为0时可能不触发animationend事件，而很多JavaScript逻辑依赖这个事件收尾。用极短时长既能让动画“瞬间完成”，又能保证事件正常派发，jQuery的动画队列也依赖类似机制。

纯CSS方案能覆盖大多数场景，但它有局限：CSS无法控制通过jQuery的animate()、fadeIn()、slideDown()等方法驱动的动画，这些动画由JavaScript逐帧计算，不受CSS媒体查询约束。所以需要在JavaScript层面再做一层检测。

二、用matchMedia在jQuery中检测并监听设置变化

JavaScript侧的检测入口是window.matchMedia方法，传入媒体查询字符串后返回一个MediaQueryList对象，通过它的matches属性可以判断当前是否命中。在jQuery代码中，通常封装成一个工具函数，方便在各处调用：

// 判断用户是否开启了减弱动态效果
function prefersReducedMotion() {
    // 老浏览器不支持时返回false，保持默认动画行为
    if (!window.matchMedia) {
        return false;
    }
    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}

$(function () {
    if (prefersReducedMotion()) {
        console.log('用户开启了Reduce Motion，应禁用动画');
        $('body').addClass('reduce-motion');
    }
});

这个检测还有一个容易忽略的点：用户可能在浏览页面的过程中临时切换系统设置，比如把窗口切到系统偏好设置里打开开关再切回来。为了让页面实时响应，应该用MediaQueryList的change事件做监听，而不是只在页面加载时判断一次：

var motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

function handleMotionChange(evt) {
    if (evt.matches) {
        $('body').addClass('reduce-motion');
        // 立即停止当前正在执行的所有jQuery动画
        $('*').stop(true, true);
    } else {
        $('body').removeClass('reduce-motion');
    }
}

// 兼容旧版Safari的addListener写法
if (motionQuery.addEventListener) {
    motionQuery.addEventListener('change', handleMotionChange);
} else if (motionQuery.addListener) {
    motionQuery.addListener(handleMotionChange);
}

// 初始化时执行一次
handleMotionChange(motionQuery);

代码里的$('*').stop(true, true)值得说明：第一个参数true表示清空动画队列，第二个参数true表示立即跳到动画终点。这样切换设置的那一刻，正在进行的动画会直接呈现最终状态，不会卡在半途造成布局错乱。配合body上的reduce-motion类，CSS侧也可以针对这个类写降级样式，形成双保险。

三、封装jQuery动画方法实现统一降级

即使检测到位，如果业务代码里到处直接调用$('#el').fadeIn(600)，仍然需要逐处修改。更优雅的做法是写一个统一的动画封装函数，把“是否禁用动画”的判断收敛到一处：

var Motion = {
    enabled: !window.matchMedia('(prefers-reduced-motion: reduce)').matches,

    // 统一动画入口：duration为期望时长
    animate: function ($el, props, duration, callback) {
        if (!this.enabled) {
            // 直接设置终态样式，跳过动画
            $el.stop(true).css(props);
            if (typeof callback === 'function') {
                callback();
            }
            return $el;
        }
        return $el.animate(props, duration, callback);
    },

    show: function ($el, duration, callback) {
        if (!this.enabled) {
            $el.stop(true).show();
            if (typeof callback === 'function') callback();
            return $el;
        }
        return $el.fadeIn(duration, callback);
    },

    hide: function ($el, duration, callback) {
        if (!this.enabled) {
            $el.stop(true).hide();
            if (typeof callback === 'function') callback();
            return $el;
        }
        return $el.fadeOut(duration, callback);
    }
};

// 业务代码中的用法
$(function () {
    $('#panel-btn').on('click', function () {
        var $panel = $('#panel');
        if ($panel.is(':visible')) {
            Motion.hide($panel, 400);
        } else {
            Motion.show($panel, 400);
        }
    });
});

这种封装的关键在于回调处理：禁用动画时必须同步或异步执行回调，否则依赖回调的后续逻辑（比如动画完成后提交表单、释放内存）会中断。上面的实现中直接调用了回调函数，保证了业务流程不受降级影响。如果回调链较深，也可以统一用setTimeout(callback, 0)保证异步语义一致。

另一个思路是全局修改jQuery.fx.off这个官方开关。把它设为true后，所有jQuery动画都会立即跳到终态，一行代码就能生效：

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    jQuery.fx.off = true; // 全局关闭所有jQuery动画
}

jQuery.fx.off的优点是零改造成本，缺点是粒度太粗，连加载指示器这类功能性转圈也会被关掉，可能影响用户理解当前状态。实践中建议组合使用：全局开关处理装饰性动画，封装函数处理需要保留“状态反馈”的场景，比如把旋转加载图标换成静态的“加载中…”文字提示。

四、落地时的注意事项

第一，不要简单粗暴地删掉所有动效。减弱动态效果的本意是“减少引起不适的运动”，淡入淡出、颜色渐变这类不涉及大范围位移的效果通常是安全的，可以保留以维持界面的状态反馈。真正需要禁用的是大面积平移、视差滚动、弹跳缩放和持续循环的装饰动画。

第二，注意检测的优先级。一些站点会提供用户自定义的“减少动画”偏好设置，此时应把用户站内偏好与系统级prefers-reduced-motion做“或”运算——任意一个开启即降级，并且站内偏好应能覆盖系统判断，让用户拥有最终决定权。

第三，做好浏览器兼容。iOS Safari 10.4之前不支持prefers-reduced-motion，老旧IE则完全不支持matchMedia的媒体特性监听。降级策略是“不支持即视为无偏好”，保持默认动画行为即可，不要因为检测失败而让页面功能异常。按照上面的封装写法，所有检测都带有兜底分支，即使API缺失也能正常工作，这也是无障碍开发的基本原则：增强体验可以渐进，核心功能必须可用。

jQueryReduce Motionprefers-reduced-motion修改时间：2026-09-09 17:58:57