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时没有任何延迟。