jQuery的可以知道，当我的gif动画已经结束？ [英] Can Jquery know when my animated gif has ended?

问题描述

我想知道是否它可能有一个GIF动画播放，然后通过jQuery的激发关闭一个事件一旦GIF已达到其动画的结尾。一旦这样做，则它循环回队列的开始，并再次播放的gif然后事件

如果你看看我的jfiddle，我犯了一个人打字有点GIF。然后，当他抬起头，有想法，我想，思想的div改到别的东西。我pretty很想这个词在他的头上是在同步和更改权当他的头弹出。

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

 ＆LT; D​​IV ID =思想＆GT;
    惊人的想法
＆LT; / DIV＆GT;＆LT; D​​IV ID =firstgif＆GT;
    ＆所述; IMG SRC =htt​​p://i.imgur.com/pcc4DP5.gif/＆GT;
＆LT; / DIV＆GT;
 

解决方案

我要回答的是类似这个答案和一个类似计算器的问题这一个。

如果你有一个GIF使用框架集数和不循环，可以使JavaScript中使用的setTimeout 来触发您的活动。有了这个，虽然，它有走出去同步只是因为你在玩猜谜游戏是否GIF的渲染会以相同的速度，每次打出来的JavaScript执行非常高的机会。

一个更安全的选择是什么，我挂了对方的回答中，你使用精灵地图模拟动画。这是通过使用JavaScript来改变图像的元素的背景位置来实现。这样一来，你有很多关于动画的动画更多的控制权，在JavaScript事件和更好的时机，因为它是依赖于JavaScript的执行速度更大的控制/它只会在你告诉它是在动画的框架。

我没有一个例子，但是我很乐意帮助，如果你得到这个体面的领先地位或有其他任何问题。

<一个href=\"http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/\"相对=nofollow>有关CSS精灵有用的信息

Im wondering if its possible to have an animated gif play, then fire off an event through jquery once the gif has reached the end of its animation. Once it does that, then it loops back to the beginning of the queue, and plays the gif then event again.

If you take a look at my jfiddle, i made a little gif of a guy typing. and then when he looks up and gets an idea, i want that "thought" div to change to something else. I pretty much want that word above his head to be in synch and change right when his head pops up.

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

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

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

解决方案

My answer to this is similar to this answer and this one on a similar stackoverflow question.

If you have a GIF with a set number of frames and without loop, you can make javascript use setTimeout to trigger your event. With this though, it has a very high chance of going out of sync simply because you are playing a guessing game whether the rendering of the GIF will play out at the same speed as the javascript execution each time.

A safer option is what the other answer I linked said in the way that you use a sprite map to simulate an animation. This is achieved by using javascript to change the background position of the image in the element. This way, you have a lot more control about how the animation animates, greater control over javascript events and better timing as it is tied to javascript execution speed / it will only be at the frame of the animation you tell it to be at.

I don't have an example however I am happy to help if you get a decent headstart on this or have any other questions.

Useful information regarding CSS Sprites

这篇关于jQuery的可以知道，当我的gif动画已经结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！