最近我们为我们的网站制作了一些GIF动画。其中一个动画是地图上的标记,在空中“跳跃”。我们的想法是让鼠标在鼠标上跳跃一次。换句话说:它只能播放一次,而不是在盘旋时进入无限循环。JS/jQuery - 仅在悬停时播放GIF
我开始阅读这篇文章:Animating a gif on hover。我使用代码在悬停时启动动画,并用鼠标将其替换为静态图像。
但是这并没有使我接近我想要的东西。有了这个脚本,它一直在循环播放,这是逻辑,但正是我们不想要的。另外,当您将鼠标移出时,我们希望GIF继续动画直到完成,而不是立即停止。最后但并非最不重要的是:当您悬停时,请将鼠标移出,然后在动画仍在继续时再次悬停,在播放过程中不应重新启动。
据我现在的理解,当我们创建动画时我并没有意识到,使用jQuery来控制GIF动画非常困难。
我能想到的唯一的事情就是使用动画的时间/持续时间。例如。如果动画需要3秒钟,那么我们可以用GIF将静态图像(悬停时)替换为这段时间。如果我们在img标签中的数据属性中传递持续时间,我们甚至可以为所有GIF编写通用脚本。但是这意味着需要编写大量的代码,而且这对我来说似乎不是最简单的方式。
有没有人有一个更简单的方法来实现我们想要的想法?我期待着听到你对这个问题的看法。
把它切换成.mp4怎么样? – user2182349
http://stackoverflow.com/questions/16139629/can-jquery-know-when-my-animated-gif-has-ended这里是一个类似的问题,但不认为有一个简单的方法来做到这一点,除非你将其转换为视频。然后你可以等到它完成。 – khuderm
使用多个gif –