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??

Answer 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;
}

Answer 2

do you need to use jquery here?

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

Answer 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.

Answer 4

No, you can't control the animation of the images.

You would need two versions of each iamge, one that is animated, and one that's not. On hover you can easily change from one image to another.

Answer 5

Get two images, one png and one gif :

<div>
    <img class="static" src="https://webpage.com/image1.png">
    <img class="active" src="https://webpage.com/image2.gif">
</div>

Use the following css, and on hover png will be opaque and gif is visible.

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}