在jQuery+；CSS

如果用户将鼠标悬停在字符串上，我将尝试为其设置动画。 （将其转换为数组，并在每个字母上绘制不同的动画） 动画效果很好，但我有一个问题

当我第二次将鼠标悬停在元素（mouseenter）上时，代码会向用户显示悬停在元素上的所有标记，如下所示：

代码如下。 如果将鼠标悬停在名称上两次，就会看到问题所在。 有没有关于如何解决这个问题的建议

JSfiddle：

$（函数（）{
变量$win=$（窗口），
w=0，
h=0，
rgb=[]，
getWidth=function（）{
w=$win.width（）；
h=$win.height（）；
};
$win.resize（getWidth）.mousemove（函数（e）{
rgb=[
数学四舍五入（e.pageX/w*255），
数学四舍五入（e.pageY/h*255），
150
];
$（document.body.css（'background'，'rgb（'+rgb.join（'，'）+'））；
}).resize（）；
$（'.firstName'）。on（'mouseenter'，function（）{
让firstNameArray=$（'.firstName'）.html（）.split（''）[0].split（''）；
让lastNameArray=$（'.firstName'）.html（）.split（''）[1].split（''）；
$（'.firstName'）.html（''）；
for（名字的字母数组）{
让radomizer=Math.floor（Math.random（）*3）；
$（'.firstName'）。追加（`${letter}`）；
}
$（'.firstName'）。追加（''）
for（lastNameArray的字母）{
让radomizer=Math.floor（Math.random（）*3）；
$（'.firstName'）。追加（`${letter}`）；
}
});
});
.firstBox{
保证金上限：10雷姆；
}
.firstBox>div{
边缘顶部：3rem；
}
div>h1{
颜色：白色；
字体大小：55px；
文字阴影：2倍黑色立体；
}
.动画0{
动画：字母向前旋转1.5秒；
显示：内联块；
}
.动画1{
动画：字母向下移动1.5秒；
显示：内联块；
}
.动画2{
动画：字母向前移动1.5秒；
显示：内联块；
}
@关键帧旋转{
0% {
变换：旋转（100度）；
}
50% {
变换：旋转（250度）；
}
100% {
变换：旋转（0度）；
}
}
@关键帧向下移动{
0% {
变换：translateY（0px）；
}
50% {
变换：translateY（20px）；
}
100% {
变换：translateY（0px）；
}
}
@关键帧向上移动{
0% {
变换：translateY（0px）；
}
50% {
转换：translateY（-20px）；
}
100% {
变换：translateY（0px）；
}
}

伊甸哈扎尼
伊甸哈扎尼
不是你的贪婪
网络开发者
AOS.init（）；
之所以发生这种情况，是因为您在鼠标输入时更改了类firstName中的html。我的建议是在mouseout事件之后更改html，即

        $('.firstName').on('mouseout', function () {
             $(this).html('Eden Hazani');
        });

这就解决了问题，但发生的是一旦我将鼠标移出，动画就会立即停止。。。我试着把它放在一个类似这样的超时内：$（'.firstName'）.on（'mouseout'，function（）{setTimeout（（）=>{$（this.html（'Eden Hazani'）；}，1500）；}）；但是，在超时的时间范围内，我遇到了第一个问题，您必须应用一些超时，并将名称包装在某个div中