JS/jQuery - 悬停时只播放一次 GIF
JS/jQuery - Play GIF only once on hover
最近我们为我们的网站制作了一些 GIF 动画。其中一个动画是地图上的标记，'jumps' 在空中。我们的想法是让标记在鼠标悬停时只跳一次。换句话说：它应该只播放一次，而不是在悬停时进入无限循环。
我是从阅读这篇文章开始的 post：Animating a gif on hover。我使用代码在悬停时启动动画，并在鼠标移出时用静态图像替换它。
但这并没有让我接近我想要的。使用此脚本，它会一直循环播放，这是合乎逻辑的，但正是我们不想要的。此外，当您离开鼠标时，我们希望 GIF 继续播放动画直到完成，而不是立即停止。最后但同样重要的是：当你悬停时，将鼠标移开，然后在动画仍在播放时立即再次悬停，它不应该在播放时重新启动。
据我现在了解，以及我在创建动画时没有意识到的是，使用 jQuery 控制 GIF 动画非常困难。
我唯一能想到的就是使用动画的time/duration。例如。如果动画需要 3 秒，那么我们可以在这段时间内用 GIF 替换静态图像（悬停时）。如果我们在 img 标签的数据属性中传递持续时间，我们甚至可以为所有 GIF 编写一个通用脚本。但这意味着要编写大量代码，而且对我来说这似乎不是最简单的方法。
有没有人有更简单的方法来实现我们想要的？我期待听到您对此的想法。
当您创建 gif 图像时，您可以将其创建为仅循环一次。
因此，要解决此问题，请先加载文件的静态版本。当你悬停图片时，把它变成gif图片，并保持原样，这样它就可以完成它的一次性动画。
我不会使用任何时间。确切时间很难预测，因为有些计算机速度较慢，加载时间也应考虑在内。
所以，解决方案：
- 制作一个只循环一次的gif图像（如果你有合适的工具，这是一个可以在图像本身中设置的属性）。
- 最初显示图像的静态版本。
- 鼠标悬停时，向元素添加 class，以便应用不同的样式，将其更改为不同的图像，或者如果您使用
img，则更改 src 属性元素.
- 保持原样。根本不要删除 class。
- Preload the image，因此当您将 src 从静态图像切换到动画 gif 时没有延迟。
最近我们为我们的网站制作了一些 GIF 动画。其中一个动画是地图上的标记，'jumps' 在空中。我们的想法是让标记在鼠标悬停时只跳一次。换句话说：它应该只播放一次，而不是在悬停时进入无限循环。
我是从阅读这篇文章开始的 post：Animating a gif on hover。我使用代码在悬停时启动动画，并在鼠标移出时用静态图像替换它。
但这并没有让我接近我想要的。使用此脚本，它会一直循环播放，这是合乎逻辑的，但正是我们不想要的。此外，当您离开鼠标时，我们希望 GIF 继续播放动画直到完成，而不是立即停止。最后但同样重要的是：当你悬停时，将鼠标移开，然后在动画仍在播放时立即再次悬停，它不应该在播放时重新启动。
据我现在了解，以及我在创建动画时没有意识到的是，使用 jQuery 控制 GIF 动画非常困难。
我唯一能想到的就是使用动画的time/duration。例如。如果动画需要 3 秒，那么我们可以在这段时间内用 GIF 替换静态图像（悬停时）。如果我们在 img 标签的数据属性中传递持续时间，我们甚至可以为所有 GIF 编写一个通用脚本。但这意味着要编写大量代码，而且对我来说这似乎不是最简单的方法。
有没有人有更简单的方法来实现我们想要的？我期待听到您对此的想法。
当您创建 gif 图像时，您可以将其创建为仅循环一次。
因此，要解决此问题，请先加载文件的静态版本。当你悬停图片时，把它变成gif图片，并保持原样，这样它就可以完成它的一次性动画。
我不会使用任何时间。确切时间很难预测，因为有些计算机速度较慢，加载时间也应考虑在内。
所以，解决方案：
- 制作一个只循环一次的gif图像（如果你有合适的工具，这是一个可以在图像本身中设置的属性）。
- 最初显示图像的静态版本。
- 鼠标悬停时，向元素添加 class，以便应用不同的样式，将其更改为不同的图像，或者如果您使用
img，则更改src属性元素. - 保持原样。根本不要删除 class。
- Preload the image，因此当您将 src 从静态图像切换到动画 gif 时没有延迟。