Question

I have a small page with two divs, clicked on the first div will pop up the second div and hide the first one, there are three gif files on the second div and the animation will begin to play once the second div poped out. Clicked on the second div will pop out the first div and hide the second one. What I want to is that, if I back to second div again, the animation will play again but in autually it does not, it only for the first time. Why? It seems that in jQuery, the animation will only play for the first time when the div loaded, anyone knows the answers? Thanks a lot!

Answer 1

The GIF animiation cannot be controlled by Javascript. As far as I know, it’s even undefined when it’s supposed to start. Most browser start it when the image is first loaded. I have never seen that a browser restarts the animation when the image is re-shown after it was hidden. (If it’s an endless animation, the animation continues at some random point.)

To achieve the desired effect, you could try to implement the same effect as Google with their +1 button on their search page (when you’re logged in). They use a single PNG with multiple frames (see How to create the google plus one button effect using jquery?) and JavaScript to change the background-position CSS attribute to do the animation.