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

【问题标题】：gif starts playing on hover and stops when mouseout?gif在悬停时开始播放并在鼠标悬停时停止？
【发布时间】：2012-08-26 11:44:51
【问题描述】：

我想制作下面的 gif，它最初停止但在悬停时开始播放，当鼠标悬停时它会停止...有人可以帮我吗？？

【问题讨论】：

标签： jquery css animated-gif onhover

【解决方案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 的支持，那么除了 <a> 之外不会触发 hover 事件：

CSS：

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

【讨论】：

非常优雅的解决方案。 OP 提供的动画不会永远重复。如果它是一个无限动画，那么它确实会通过这种方法永远重复。这让我想到了其他方法！

【解决方案2】：

这里需要使用jquery吗？

gif 没有加载，但是 .div { 背景： url('.png'); } .div:hover { 背景: url('.gif'); }

【讨论】：

在hover 上它将在第一次迭代后停止 - GIF 应该无限循环以使其工作
@Zoltan: hover 导致带有无限重复动画的 GIF 在第一次迭代后停止？
@Lèsemajesté 肯定不是 :) 这只是 OP 提供的 GIF - 不是无限的（至少对我来说），只运行 1 次迭代
@Zoltan：啊，是的。如果他想使用那个动画，那么他要么需要用 JS 手动重新启动动画，要么最好只编辑 GIF 让它无限重复。我知道旧的 Adobe ImageReady 可以做到这一点，但我不确定您如何使用当前的 Creative Suite 编辑动画循环。

【解决方案3】：

如果您只想在没有动画时显示固定的静态图像，那么就像在悬停时更改图像一样简单（使用 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

注意： 这是一个幼稚的实现。对于生产代码，您需要预加载图像或简单地使用 spritemap。但基本概念是相同的——手动为图像/按钮设置动画，这样当您冻结动画时，它会冻结在当前帧上。另一种方法是使用 jsgif 之类的东西，它使用 XHR 下载 GIF 文件，解析二进制数据以提取单个帧，然后使用 HTML5 Canvas 呈现它们。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：