Does Gif start playing on hover and stop when you mouse out?

Question

I wana will make below the gif, which first stopped, but starts playing on hover, and when the mouse is stopped ... can someone help me?

Answer 1

In your case it’s not difficult to call the animation, my idea is to place two images on the page (animated and not). And show / hide them on mouse transition / output.

<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 this even with simple CSS, if you don't need IE6 support that doesn't hover event for anything other than <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?

gif does not 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 is not animating, then it is as simple as changing the image on hover (using CSS or JS).

But if you want to actually freeze the animation in the current frame on the mouse, then the only way to do this is to animate the image manually, for example. 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 want to preload images or just use spritemaps. But the basic concept is the same thing: manually animating the image / button, so when you freeze the animation, it freezes in the current frame. The alternative uses something like jsgif , which uses XHR to load a GIF file, parses binary data to extract individual frames, and then displays using HTML5 Canvas.

Answer 4

No, you cannot control image animations.

You will need two versions of each iamge, animated, and the other not. When hovering, you can easily switch from one image to another.