Javascript 悬停元素时淡入/淡出图像的正确方式

我正在使用animeJS动画库（www.animeJS.com）进行一些测试，当用户将鼠标移动到页面中的一些div元素上时，我想使用它来更改另一个图像。另外，我想用一个很好的淡出/淡入效果来交换图像。你可以在这把小提琴中看到一个例子：

如果您尝试它，您将看到它工作良好，直到您在播放动画时将鼠标从一个div移动到另一个div。为了避免在这种情况下出现闪烁效果，我添加了一个“锁”（

animLock

变量），一次只允许一个动画。这会产生另一个问题，因为图像没有正确更新

有人能告诉我一个更好的方法来处理这个问题吗？谢谢

Ad这个CSS

img{
  transition: all 0.8s;
}
img:hover{
  opacity:0.1;
 transition: all 0.8s;
}

---

您好，我想在其他div上悬停时更改图像，而不是图像本身，因此此更改不适用于我的情况，对不起。对于被否决的人：如果您不介意，您能解释一下原因吗？我只是问了一些我不知道的问题，在我发布这个问题之前，我看了一些动漫的例子，在谷歌上搜索了一些我想要的信息，但是我找不到任何有用的东西。而且，这个主题对我来说是新的，所以我认为问很多对经验丰富的开发人员来说可能是愚蠢的问题是很正常的。但是，在我看来，如果你认为某个问题值得投否决票，当然你可以给出，但至少你可以说为什么或者给出一些建议来帮助新手。有时学习是如此令人沮丧！！