Javascript anime.js不针对元素

我正在尝试为单个类的每个元素创建一个鼠标悬停触发的动画，并且在分别针对相对类实例时遇到问题。我能做的唯一一件事就是使用整个类本身作为目标，如下所示

$('.skillList div').mouseover(() => {
        anime({
            targets: '.skillList div',
            translateX: 2000,
            easing: 'easeOutElastic(1, .6)',
            duration: 2000
        });
})

但是，上面的代码会生成每个元素（div）的动画，其父元素为.skillList。我希望做的是针对每个元素（div）更具体。我已经尝试通过下面所示的多种方法将$（this）用作目标

targets: '$(this)'

$('.skillList div').mouseover(() => {
    $(this).addClass('temp');
    
        anime({
            targets: '.temp',
            translateX: 2000,
            easing: 'easeOutElastic(1, .6)',
            duration: 2000
        });
})

…对此我感到惊讶，但没有任何效果

我对控制台进行了一点调试，并确保鼠标悬停功能不应受到指责

console.log("hovered");

^^显示每个元素都有自己的mouseover函数

我也很好奇“this”是否返回了一个与动画兼容的元素，这让事情变得更加混乱。在控制台记录“$（this）”之后，我注意到它返回了一个嵌套对象，其根包含属性“0:Window，length:1”，这是我以前从未见过的。这是一张照片。。。

尽管如此，在列出的任何尝试中，我都没有发现任何错误。因此，我怀疑“this”不能用于.anime（），但是，我确实知道“this”（应该是mouseover元素）不是目标

此外，我还尝试向mouseover元素添加一个temp类，这样我就可以按类名将其作为目标，如下所示

targets: '$(this)'

$('.skillList div').mouseover(() => {
    $(this).addClass('temp');
    
        anime({
            targets: '.temp',
            translateX: 2000,
            easing: 'easeOutElastic(1, .6)',
            duration: 2000
        });
})

…这被证明是无用的

最后，我进一步向每个div元素添加了一个名为skill的类，这样我就可以直接将div作为目标，而不是通过其父.skillList

<div class="skillList">
    <div class="skill">&lthtml&gt</div>
    <div class="skill">.css {}</div>
    <div class="skill">javascript()</div>
    <div class="skill">$php</div>
    <div class="skill">def python():</div>
</div>

注意，我还使用新的mouseover元素（“.skill”）尝试了上述所有尝试。不言而喻，这些尝试都没有奏效，我很困惑该用什么作为我的动画目标。我几乎可以肯定的一个解决方案是给.skillList的每个元素一个唯一的ID，并为每个元素制作一个动画函数。然而，我希望避免冗余，我相信你们都会理解这一点

提前感谢您的时间，我为这么长的帖子道歉！

---

干杯：）

在您的物品上循环，并将活动分别附加到它们：

let skills=document.querySelectorAll（'.skillList div'）；
技能。forEach（技能=>{
skill.addEventListener（'mouseover'，function（）{
动画({
目标：技能，
translateX:50，
缓和：“缓和弹性（1，.6）”，
持续时间：2000年
});
});
});

技能1
技能2
技能3
技能4
技能5
要将每个div与任何其他div区分开来，您必须获得一些标识符类。像每个部门都有一个额外的类，这是不同的，并用于动画。工作像一个魅力！谢谢你，冠军！
targets: this

console.log("hovered");

$('.skillList div').mouseover(() => {
    $(this).addClass('temp');
    
        anime({
            targets: '.temp',
            translateX: 2000,
            easing: 'easeOutElastic(1, .6)',
            duration: 2000
        });
})

<div class="skillList">
    <div class="skill">&lthtml&gt</div>
    <div class="skill">.css {}</div>
    <div class="skill">javascript()</div>
    <div class="skill">$php</div>
    <div class="skill">def python():</div>
</div>

$('.skill').mouseover(() => {
    $(this).addClass('temp');
    
        anime({
            targets: '.temp',
            translateX: 2000,
            easing: 'easeOutElastic(1, .6)',
            duration: 2000
        });
})