JS/jQuery - 悬停时只播放一次 GIF

Question

最近我们为我们的网站制作了一些 GIF 动画。其中一个动画是地图上的一个标记，它在空中“跳跃”。我们的想法是让标记在鼠标悬停时只跳一次。换句话说：它应该只播放一次，并且在悬停时不会进入无限循环。

我从阅读这篇文章开始：Animating a gif on hover。我使用代码在悬停时启动动画，并在鼠标移出时将其替换为静态图像。

但这并没有让我接近我想要的。使用这个脚本，它会一直循环播放，这是合乎逻辑的，但正是我们不想要的。此外，当您将鼠标移出时，我们希望 GIF 继续动画直到完成，而不是立即停止。最后但同样重要的是：当您悬停时，将鼠标移出，然后在动画仍在运行时立即再次悬停，它不应在仍在播放时重新启动。

据我所知，当我们创建动画时我没有意识到，用 jQuery 控制 GIF 动画非常困难。

我唯一能想到的就是使用动画的时间/持续时间。例如。如果动画需要 3 秒，那么我们可以用 GIF 替换静态图像（悬停时），时间正好。如果我们在 img 标签的数据属性中传递持续时间，我们甚至可以为所有 GIF 编写一个通用脚本。但这意味着要编写大量代码，而且对我来说这似乎不是最简单的方法。

有没有人想出一种更简单的方法来实现我们想要的？我期待听到您对此的看法。

Answer 1

当您创建一个 gif 图像时，您可以创建它以便它只循环一次。

因此，要解决此问题，请先加载文件的静态版本。当您将图像悬停时，将其更改为 gif 图像，并保持这种状态，这样它就可以完成其一次性动画。

我不会使用任何时间。确切的时间很难预测，因为某些计算机速度较慢，并且还应考虑加载时间。

所以，解决办法：

• 制作只循环一次的 gif 图像（如果你有合适的工具，这是一个可以在图像本身中设置的属性）。
• 最初显示图片的静态版本。
• 鼠标悬停时，向元素添加一个类，以便应用不同的样式，将其更改为不同的图像，或者如果您使用了img 元素，则更改src 属性。
• 保持现状不变。根本不要删除课程。
• Preload the image，因此当您将 src 从静态图像切换到动画 gif 时不会有延迟。