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

Question

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

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

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

据我现在了解，以及我在创建动画时没有意识到的事情，用 jQuery 控制 GIF 动画非常困难。

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

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

Answer 1

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

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

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

所以，解决方案:

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