1

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!

ShawnWang
  • 68
  • 1
  • 7
  • 1
    How is the animation of your GIF setup? Will it repeat forever or play it just once if you put it on a page with nothing else than the GIF? – Codo Aug 09 '11 at 05:53
  • You cannot control the animation of a GIF file using Javascript. Please see this post: http://stackoverflow.com/questions/4286905/javascript-to-control-image-animation – evasilchenko Aug 09 '11 at 06:04
  • I put the gif image file as a background of one div, if the idv is visible to the user, I will play the animation with $(#'divID').play(), it works. But we I leave the page and back again, the gif will not play, it display its last stage from the last time. – ShawnWang Aug 09 '11 at 06:08
  • You are using play() ? What plugin is that? I couldnt find the play documentation in jquery docs. – Pehmolelu Aug 09 '11 at 06:40
  • My mistake, the play() seems does not effect anything, it's useless but does not impact the page. What I did is set the gif as the background of the div and when the div become visible, the background will play, but only one time. When I leave and back so the div should visible again, the gif does not play automatically. Is there any way so the div with the gif background will play every time when the div become visible. Sorry for any confuse and appreciate for any help. – ShawnWang Aug 09 '11 at 06:51

2 Answers2

2

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.

Community
  • 1
  • 1
Codo
  • 75,595
  • 17
  • 168
  • 206
0

try this http://spritely.net/

you can control your animation with jquery and its easy to use.

Jude Calimbas
  • 2,764
  • 2
  • 27
  • 24