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

kin*_*lly 7 queue jquery gif animated

我想知道是否它可能有一个GIF动画播放,然后通过jQuery的激发关闭一个事件一旦GIF已达到其动画的结尾.一旦它这样做,然后它循环回到队列的开头,然后再次播放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>
Run Code Online (Sandbox Code Playgroud)

Tur*_*erj 5

对此的回答类似于这个答案,这个问题与类似的stackoverflow问题类似.

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

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

我没有一个例子,但是如果你有一个像样的头脑或有任何其他问题,我很乐意提供帮助.

有关CSS Sprites的有用信息