gif开始在悬停时播放，并在鼠标悬停时停止播放？

Question

我wana使下面的GIF，其中最初采取，但开始播放悬停，当mouseout它会停止...任何人都可以帮助我？

Answer 1

在你的情况，原因动画并不复杂，我的想法是一个页面（动画，而不是）上放置两个图像。并显示/隐藏它们在鼠标上/下。

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

脚本：

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

CSS：

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

或者，你甚至可以用一个简单的CSS做到这一点，如果你不需要对IE6支持，至极不触发hover事件，但<a>：

CSS：

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

Answer 2

你需要在这里使用jquery吗？

gif不加载，但是 .div {background：url（'。png'）; } .div：hover {background：url（'.gif'）; }

Answer 3

如果你只是想显示一个固定的静态图像，而不是动画，那么就像改变悬停图像（使用CSS或JS）一样简单。

但是，如果您想要在mouseout上实际冻结当前帧上的动画，那么唯一的方法就是手动为图片制作动画，例如，与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); 
)()); 

和下面的HTML：

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

而且这些影像：

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

注： 这是一个天真的实现。对于产品代码，您需要预先加载图像或仅使用spritemaps。但基本概念与手动设置图像/按钮的动画效果相同，因此当您冻结动画时，它会冻结当前帧。另一种方法是使用类似jsgif，它使用XHR下载GIF文件，解析二进制数据以提取各个帧，然后使用HTML5画布呈现它们。

Answer 4

不，你不能控制图像的动画。

你需要两个版本的每个iamge，一个是动画的，另一个不是。在悬停时，您可以轻松地从一个图像更改为另一个图像。