最近我们为我们的网站制作了一些GIF动画。其中一个动画是地图上的一个标记，它可以跳过＆＃39;在空中。我们的想法是让标记只在鼠标上跳一次。换句话说：它只能播放一次而不会在悬停时进入无限循环。
我开始阅读这篇文章：Animating a gif on hover。我使用代码在悬停时启动动画，并在鼠标移出时用静态图像替换它。
但这并没有让我接近我想要的东西。有了这个脚本，它就会继续循环播放，这是逻辑，但正是我们不想要的。此外，当你鼠标移出时，我们希望GIF继续动画直到完成，而不是立即停止。最后但并非最不重要的一点：当你悬停时，将鼠标移出然后在动画仍在进行时立即再次悬停，它仍然不会在它仍在播放时重新启动。
正如我现在所理解的，以及当我们创建动画时我没有意识到，使用jQuery控制GIF动画非常困难。
我唯一能想到的是处理动画的时间/持续时间。例如。如果动画需要3秒钟，那么我们可以用GIF替换静态图像（在悬停时）完全相同的时间。如果我们在img标签的数据属性中传递持续时间，我们甚至可以为所有GIF编写通用脚本。但这意味着要编写大量代码，对我来说这似乎不是最简单的方法。
有没有人想到一种更简单的方法来实现我们想要的东西？我很期待听到你对这个问题的看法。
答案 0 :(得分：4)
创建gif图像时，可以创建它，使其仅循环一次。
因此，要解决此问题，请先加载文件的静态版本。当您将图像悬停在图像上时，将其更改为gif图像并保持这种状态，这样它就可以完成一次性动画。
我不会使用任何时间。确切的时间很难预测，因为有些计算机速度较慢，也应考虑加载时间。
所以，解决方案：
src元素，则更改img属性。