我想知道是否有可能有GIF动画播放，然后一旦gif到达动画结束就通过jquery触发事件。一旦它完成，然后它循环回到队列的开头，然后再次播放gif then事件。
如果你看看我的jfiddle，我做了一个男人打字的小gif。然后当他抬起头来想一想，我希望那个“思想”div能够改变别的东西。我非常希望他头脑中的那个词能够保持同步，当他的脑袋弹出时会改变。
<div id="thought">
Amazing Idea
</div>
<div id="firstgif">
<img src="http://i.imgur.com/pcc4DP5.gif"/>
</div>
答案 0 :(得分：5)
对于类似的stackoverflow问题，我对此的回答类似于this answer和this one。
如果您的GIF具有一定数量的帧且没有循环，则可以使用setTimeout来触发您的活动。尽管如此，它很有可能因为你正在玩一个猜谜游戏而失去同步，因为GIF的渲染是否会以与每次javascript执行相同的速度播放。
更安全的选项是我使用sprite map模拟动画的方式所说的其他答案。这是通过使用javascript来更改元素中图像的背景位置来实现的。通过这种方式，您可以更好地控制动画的动画效果，更好地控制javascript事件和更好的计时，因为它与javascript执行速度相关/它只会在您告诉它的动画帧处。 / p>
我没有一个例子，但如果你对此有一个不错的开端或有任何其他问题，我很乐意提供帮助。