使用gsap配合wordpress制作动画效果时，鼠标快速滑动导致动画失效问题
如上图所示，是我使用gsap在wordpress中制作的鼠标悬停动画。
问题：
鼠标快速滑过多张图片时，按钮和文字的动画效果会失效，导致本该下滑消失的按钮依然停留在页面上。
解决方案：
问题的本质：动画竞争（Tween Conflict）
当你快速划过时，短时间内发生以下情况：
鼠标进入 → 执行一次 .to()（进入动画）
还没播完，又触发鼠标离开 → 执行一次新的 .to()（离开动画）
GSAP 默认会让两个动画共存，同时去修改同一个属性（比如 bottom 或 opacity）
结果：
动画 A 还没播完
动画 B 把值又改了
两者互相打架，导致有时动画直接跳到终点、不播放、或者被覆盖得不完全
这就是你看到的「有时候离开动画不生效」的真正原因。
解决方式 1：overwrite: ‘auto’
GSAP 的 overwrite 参数告诉它如何处理“重复动画”：
| 值 | 作用 |
|---|---|
false | 默认，不覆盖。动画可以共存（容易冲突） |
true | 杀掉该目标上所有旧动画（粗暴但安全） |
'auto' | 只杀掉与新动画作用相同属性的旧动画（智能） |
表示：
“如果这个元素上已经有别的动画在改 bottom，那我就中断它。”
所以当你快速 hover 时，旧动画被新动画即时接管，状态保持同步。
✅ 优点：平滑、自动
⚠️ 缺点：有时候还在同时 tween 其他属性，会被保留（但一般没问题）
🧩 解决方式 2：
gsap.killTweensOf([btn, short]);
这是一种手动清除旧动画的方式，相当于自己管理“overwrite”的逻辑。
意思是：
“在做新动画前，把这些元素上还没结束的动画全杀掉。”
这确保不会有两个 .to() 同时作用在同一目标上。
✅ 优点：彻底干净，不管它在 tween 什么属性，全部杀掉
⚠️ 缺点：太频繁使用会略微影响性能（但一般无感）。
完整代码：
const product_item = document.querySelectorAll('#s5 .product_item');
product_item.forEach((item) => {
const btn = item.querySelector('.btn');
const short = item.querySelector('.product_short');
item.addEventListener('mouseenter', () => {
gsap.killTweensOf([btn, short]);
gsap.to(btn, { bottom: 0, duration: 0.3, overwrite: 'auto' });
gsap.to(short, { opacity: 0, duration: 0.2, overwrite: 'auto' });
});
item.addEventListener('mouseleave', () => {
gsap.killTweensOf([btn, short]);
gsap.to(btn, { bottom: '-20%', duration: 0.2, overwrite: 'auto' });
gsap.to(short, { opacity: 1, duration: 0.3, overwrite: 'auto' });
});
});
