gif starts playing on hover and stops when mouseout?

Question

I wana make the below gif which stoped initially but starts playing on hover and when mouseout it will stops... can anyone help me out??

Solution 1

In your case, cause animation is not complicated, ,my idea is to place two images on a page (animated and not). And show/hide them on mouse over/out.

<div id="img_wrap" class="static">
    <img id="animated" src="animated.gif" alt="">
    <img id="static" src="static.jpg" alt="">
</div>

Script:

$(function(){
    $('#img_wrap').on( 'mouseenter', function() {
         $(this).toggleClass('animated', 'static');
    })
})

CSS:

.animated #static, .static #animated {
    display: none;
}
.animated #animated, .static #static {
    display: inline;
}

Or you can do it even with a plain CSS, if you don't need a support for IE6, wich does not triggers hover event on anything but <a>:

CSS:

#img_wrap #static, #img_wrap:hover #animated {
    display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
    display: none;
}

Solution 2

do you need to use jquery here?

the gif doesn't load, but .div { background: url('.png'); } .div:hover { background: url('.gif'); }

Solution 3

If you just want to show a fixed static image when it's not animating, then it's as simple as changing the image on hover (with CSS or JS).

But if you want to actually freeze the animation on the current frame on mouseout, then the only way to do that is by animating the image manually, e.g. with JS:

(function(){
  var imgDownload = $('#BtnDownload'), interval = 250;

  function startAnimation(img, interval, frameCount) {
    var src, prefix, ext, toId;
    if (frameCount) img.data('frames', frameCount);
    interval = interval || img.data('interval');
    src = img.attr('src').split('.');
    ext = src.pop();
    prefix = src.join('.');
    img.data('ext') || img.data('ext', ext);
    img.data('prefix') || img.data('prefix', prefix);
    restartAnimation(img, interval);
    img.hover(function() {
      restartAnimation(img, interval);
    });
    img.mouseout(function() {
      clearTimeout($(this).data('timeout-id'));
    });
  }
  function restartAnimation(img, interval) {
    todId = setTimeout(animate, interval, img);
    img.data('timeout-id', toId);
  }
  function animate(img) {
    var currentFrame, nextFrame, frameCount, prefix, ext;
    currentFrame = img.data('current-frame');
    frameCount = img.data('frames');
    prefix = img.data('prefix');
    ext = img.data('ext');

    nextFrame = currentFrame + 1;
    if (nextFrame >= frameCount) nextFrame = 0;
    img.data('current-frame', nextFrame);
    img.attr('src', prefix + (nextFrame? nextFrame : '') + '.' + ext);
  }

  startAnimation(imgDownload, interval);
)());

and the following HTML:

<img src="/img/btn_download.png" alt="Download" data-frames="6">

and these images:

/img/btn_download.png
/img/btn_download1.png
/img/btn_download2.png
/img/btn_download3.png
/img/btn_download4.png
/img/btn_download5.png

Note: This is a naive implementation. For production code, you'd want to preload the images or simply use spritemaps. But the basic concept is the same—manually animate the image/button, so that when you freeze the animation, it freezes on the current frame. The alternative is using something like jsgif, which uses XHR to download the GIF file, parses the binary data to extract individual frames, and then renders them using HTML5 Canvas.

Comments

[Zoltan Toth]

on hover it will stop after the 1st iteration - the GIF should loop infinitely in order to make this work

[Lèse majesté]

@Zoltan: hover causes GIFs with an infinite repeat animation to stop after the first iteration?

[Zoltan Toth]

@Lèsemajesté sure not :) it's just the GIF that the OP provided - not infinite (to me at least), runs 1 iteration only

[Lèse majesté]

@Zoltan: Ah, yea. If he wants to use that animation, then he'll either need to restart the animation manually with JS, or preferably, just edit the GIF so it repeats infinitely. I know the old Adobe ImageReady could do this, but I'm not sure how you edit the animation loop with the current Creative Suite.

[IcyFlame]

Very elegant solution. The animation provided by the OP does not repeat forever. If it is an infinite animation, then it does repeat forever with this approach. This gave me an idea to think of other approaches!!