jquery - 停止加载 gif 动画，鼠标悬停时开始激活

Question

我有一个包含很多 GIF 的页面。

<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >

我在寻找什么

1 页面加载时 => 所有 gif 的动画均停止

2 鼠标悬停时=> 动画开始播放该 gif

3 鼠标移开时 => 该 gif 动画再次停止

我想这可以在 Jquery 中完成，但我不知道如何实现。

Answer 1

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

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

示例:

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

更新:

时间在流逝，可能性在改变。正如 kritzikatzi 指出的那样，拥有两个版本的图像并不是唯一的选择，您显然可以使用 Canvas 元素来创建动画第一帧的副本。请注意，这并不适用于所有浏览器，例如 IE 8 不支持 canvas 元素。