Jquery gif在悬停状态下开始播放，在鼠标移出时停止播放？

我想制作下面的gif，它最初停止，但在悬停状态下开始播放，当鼠标移出时它将停止。。。有人能帮我吗

---

在您的情况下，因为动画并不复杂，我的想法是在一个页面上放置两个图像（动画和非动画）。并在鼠标悬停/移出时显示/隐藏它们

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

CSS:

或者，如果您不需要对IE6的支持，您甚至可以使用简单的CSS来实现这一点，它不会在除

之外的任何东西上触发

悬停

事件：

CSS:

---

您需要在这里使用jquery吗

gif不会加载，但是 .div{background:url（'.png'）；}

---

.div:hover{background:url（'.gif'）；}

如果您只想在固定静态图像没有动画时显示它，那么只需在悬停时更改图像即可（使用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">

注意：

---

这是一个幼稚的实现。对于生产代码，您可能希望预加载图像或只使用spritemaps。但基本概念与手动设置图像/按钮的动画相同，因此当您冻结动画时，它将冻结在当前帧上。另一种方法是使用类似的东西，使用XHR下载GIF文件，解析二进制数据以提取单个帧，然后使用HTML5画布进行渲染。

不，您无法控制图像的动画

---

每个iamge需要两个版本，一个是动画版本，另一个不是动画版本。悬停时，您可以轻松地从一个图像切换到另一个图像。

获取两个图像，一个png图像和一个gif图像：

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

---

在

悬停

上，它将在第一次迭代后停止-GIF应无限循环以使其work@Zoltan：

悬停

导致具有无限重复动画的GIF在第一次迭代后停止？@Lèsemajesté当然不是：）OP提供的只是GIF，而不是无限（至少对我而言），运行1次迭代only@Zoltan：啊，是的。如果他想使用该动画，那么他需要使用JS手动重新启动动画，或者最好只编辑GIF，使其无限重复。我知道旧的AdobeImageReady可以做到这一点，但我不确定如何用当前的CreativeSuite编辑动画循环。非常优雅的解决方案。OP提供的动画不会永远重复。如果它是一个无限的动画，那么它确实会用这种方法永远重复。这让我想到了其他方法！！

(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);
)());

<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

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

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

.static:hover {
  opacity:0;
}