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

Question

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

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

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

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

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

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

Answer 1

当您创建 gif 图像时，您可以将其创建为仅循环一次。

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

我不会使用任何时间。确切时间很难预测，因为有些计算机速度较慢，加载时间也应考虑在内。

所以，解决方案:

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