Jquery可以知道我的GIF动画结束了吗？

我想知道它是否有可能有一个GIF动画播放,然后一旦gif到达它的动画结束就通过 jquery发射一个事件.一旦它这样做,然后它循环回到队列的开头,然后再次播放gif然后事件.

如果你看看我的jfiddle,我做了一个男人打字的小gif.然后当他抬起头来想一想,我希望那个“思想”的div能够改变别的东西.我非常想让他头顶的那​​个词同步,当他的脑袋突然出现时就会改变.

http://jsfiddle.net/mMVhK/1/

<div id="thought">
    Amazing Idea
</div>

<div id="firstgif">
    <img src="http://i.imgur.com/pcc4DP5.gif"/>
</div>

解决方法

我对此的回答类似于类似的stackoverflow问题上的 this answer和 this one.

如果您有一个具有设定帧数且没有循环的GIF,您可以使用javascript使用setTimeout来触发您的事件.尽管如此,它很有可能因为你正在玩一个猜谜游戏而失去同步,因为GIF的渲染是否会以与每次javascript执行相同的速度播放.

更安全的选项是我使用sprite map模拟动画的方式所说的其他答案.这是通过使用javascript来更改元素中图像的背景位置来实现的.通过这种方式,您可以更好地控制动画的动画效果,更好地控制javascript事件和更好的计时,因为它与javascript执行速度相关/它只会在您告诉它的动画帧中.

我没有一个例子,但是如果你对此有一个不错的开端或有任何其他问题,我很乐意提供帮助.

Useful information regarding CSS Sprites

原文地址：https://www.jb51.cc/jquery/177169.html