2

Recently we made some GIF animations for our website. One of the animation is a marker on a map, which 'jumps' in the air. Our idea was to let the marker jump only once on mouse over. In other words: it only should play once and not go into an endless loop when hovering.

I started by reading this post: Animating a gif on hover. I used the code to start the animation on hover and replace it with a static image on mouse out.

But this doesn't bring me near to what I want. With this script, it keeps playing in a loop, which is logic but exactly what we don't want. Also, when you go mouse out, we want the GIF to continue with the animation until is finished, and not stop immediately. Last but not least: when you hover, go mouse out and then immediately hover again while the animation is still going, it shouldn't restart while it is still playing.

As I understand now, and what I wasn't realizing when we're creating the animations, it is very hard to control a GIF animation with jQuery.

The only thing I can think of is to work with the time/duration of the animation. Eg. if the animation takes 3 seconds, then we could replace the static image (on hover) with the GIF for exactly that amount of time. We could even write an universal script for all the GIFs, if we pass the duration in a data attribute in the img tag. But that would mean writing a lot of code and it doesn't seem like the easiest way to me.

Does anyone have an idea of a more simple way to achieve what we want? I'm looking forward hearing your thoughts on this one.

Community
  • 1
  • 1
BlueCola
  • 192
  • 1
  • 2
  • 14
  • What about switching it to be an .mp4? – user2182349 Oct 17 '15 at 00:57
  • http://stackoverflow.com/questions/16139629/can-jquery-know-when-my-animated-gif-has-ended here is a similar question but don't think there is an easy way to do this unless you convert it to a video. Then you can wait until it finishes. – RisingSun Oct 17 '15 at 00:58
  • Why not just do as you say - on hover, load the animated gif and set a timeout function to replace it? 2 lines of code. – sideroxylon Oct 17 '15 at 01:03

1 Answers1

5

When you create a gif image, you can create it so that it loops only once.

So, to solve this, load a static version of the file initially. When you hover the image, change it to the gif image, and keep it that way, so it can just finish its one-time animation.

I wouldn't use any timing. The exact time is hard to predict, since some computers are slower and loading time should also be taken into account.

So, the solution:

  • Make a gif image that loops only once (this is an attribute that can be set in the image itself, if you have the right tool).
  • Show a static version of the image initially.
  • On mouseover, add a class to the element, so a different style applies, changing it to a different image, or change the src attribute if you used an img element.
  • Leave that situation as-is. Don't remove the class at all.
  • Preload the image, so there is no delay when you toggle the src from the static image to the animated gif.
GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • Awesome! Just tested it, works good. Didn't know about the 'once' attribute that could be set. One last question: is there a way to prevent the GIF from reloading, when you hover again, while it is still playing? Not that important, just curious if this is possible as well. – BlueCola Oct 17 '15 at 01:27