使用jQuery实现角色跳跃动画遇animate()未定义问题求助

你的jQuery 3.5.1是精简构建版本，从版本信息里的-effects、-effects/Tween标识可以看出，jQuery的动画模块被移除了。而animate()方法属于动画模块的核心功能，因此调用时会抛出“animate() is not a function”的错误。

方案1：替换为完整版本的jQuery #

需要将当前引入的精简版jQuery，替换为包含effects（动画）模块的完整版本。去jQuery官方渠道下载对应3.5.1版本的完整包，替换现有引入的jQuery文件后，原代码中的animate()就能正常工作。

方案2：用原生JavaScript实现跳跃动画（无需jQuery） #

如果不想更换jQuery版本，可以用原生CSS过渡结合JavaScript实现跳跃效果，代码更轻量，也不依赖jQuery动画模块：

第一步：添加CSS过渡规则 #

给角色元素添加过渡属性，定义动画的时长和曲线：

#personnage {
  position: relative; /* 必须设置，否则top属性不生效 */
  transition: top 1s ease; /* 过渡动画：top属性变化时，1秒内平滑完成 */
}

第二步：修改sauter方法代码 #

sauter: function () {
    if (!personnage.enSaut) {
        const lePersonnage = document.getElementById("personnage");
        clearInterval(personnage.threadMarcherCourir);
        personnage.enSaut = true;

        // 触发向上跳跃
        lePersonnage.style.top = "-100px";
        // 1秒后触发下落动作
        setTimeout(() => {
            lePersonnage.style.top = "0px";
            // 下落动画完成后重置状态
            setTimeout(() => {
                personnage.resetSaut();
            }, 1000);
        }, 1000);
    }
},

这种方式完全基于原生能力实现，逻辑和你原代码的跳跃流程一致，同时避开了精简版jQuery的限制。

内容的提问来源于stack exchange，提问作者Bibz