悬停时gif开始播放，当鼠标移开时停止播放？

Question

我想制作下面这个GIF，在初始时停止播放，当鼠标悬停在上方时开始播放，当鼠标移开时停止... 有人能帮我吗？

- RJ Style

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

如果您不需要支持IE6（它只在<a>上触发hover事件），您甚至可以使用普通的CSS来实现：

CSS:

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

- Dmitry Koroliov

---

非常优雅的解决方案。OP提供的动画不会永远重复播放。如果它是一个无限动画，那么使用这种方法它确实会永远重复播放。这给了我想到其他方法的灵感！！ - IcyFlame

Answer 2

如果您只想在不进行动画时显示固定的静态图像，那么只需使用CSS或JS更改悬停时的图像即可。

但是，如果您想在鼠标移出时实际上冻结当前帧的动画，则唯一的方法是手动对图像进行动画处理，例如使用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 Canvas呈现它们。

- Lèse majesté

Answer 3

你需要在这里使用jQuery吗？

GIF图像无法加载，但是 .div { background: url('.png'); } .div:hover { background: url('.gif'); }

- lkiernan

---

在“hover”时，它将在第一次迭代后停止 - GIF应该无限循环以使其正常工作。 - Zoltan Toth

@Zoltan：hover会导致无限重复动画的GIF在第一次迭代后停止播放？ - Lèse majesté

@Lèsemajesté 当然不会 :) 这只是 OP 提供的 GIF - 对我来说并不是无限循环，只运行一次。 - Zoltan Toth

@Zoltan：啊，是的。如果他想使用那个动画，那么他要么需要使用JS手动重新启动动画，要么最好只需编辑GIF使其无限重复播放。我知道旧版的Adobe ImageReady可以做到这一点，但我不确定如何在当前的Creative Suite中编辑动画循环。 - Lèse majesté

Answer 4

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

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

- prat1kk

Answer 5

获取两个图像，一个是PNG格式，另一个是GIF格式：

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

使用以下CSS，当鼠标悬停时PNG将变为不透明，GIF将可见。

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

.static:hover {
  opacity:0;
}

- london_utku