如何用jQuery在hover时触发已编写好的CSS挥手动画

你现有CSS直接把动画属性绑定在全局.wave类上，页面加载后动画会自动执行，同时没有为hover触发预留类切换逻辑，这是之前所有尝试失效的核心原因。

1. 调整CSS结构，分离基础样式和动画样式 #

把动画相关属性从默认的.wave类中抽离，放到独立的触发类中，默认元素不挂载动画类，只有触发时才动态添加：

/* 保留元素基础样式，默认不配置动画 */
.wave {
  transform-origin: 70% 70%;
  display: inline-block;
}

/* 动画属性独立成类，仅触发时挂载 */
.wave.animate {
  animation-name: wave-animation;
  animation-duration: 2.5s;
}

@keyframes wave-animation {
  0% { transform: rotate(0.0deg) }
  10% { transform: rotate(14.0deg) } 
  20% { transform: rotate(-8.0deg) }
  30% { transform: rotate(14.0deg) }
  40% { transform: rotate(-4.0deg) }
  50% { transform: rotate(10.0deg) }
  60% { transform: rotate(0.0deg) }
  100% { transform: rotate(0.0deg) }
}

2. 调整HTML结构 #

移除元素默认绑定的animate类，避免页面加载时自动播放动画：

<h1 class="Header">
  Hello!<div class="wave">👋🏽 </div> 
</h1>

3. 编写jQuery交互逻辑 #

注意两个新手高频踩坑点：

• 必须确保jQuery库已在当前脚本前引入，否则会报$ is not defined错误
• 脚本需放在DOM加载完成后执行，避免选中不到对应元素

// DOM加载完成后执行所有交互逻辑
$(function() {
  // 鼠标移入时触发动画
  $('.wave').on('mouseenter', function() {
    // 先清除原有动画类，重置状态
    $(this).removeClass('animate');
    // 强制浏览器重绘，确保动画能重新触发
    void this.offsetWidth;
    // 重新添加动画类，启动动画
    $(this).addClass('animate');
  });

  // 动画播放结束后自动移除类，方便下次hover重新触发
  $('.wave').on('animationend', function() {
    $(this).removeClass('animate');
  });
});

• 未分离默认样式和动画样式，动画始终处于激活状态，类切换操作不生效
• 添加动画类后未做移除处理，动画仅能播放一次，后续hover无响应
• jQuery脚本执行早于DOM元素加载，选中元素为空
• 未引入jQuery依赖，方法未定义
• 未添加强制重绘逻辑，连续hover时浏览器默认合并相同类渲染，动画不重新触发

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