jQuery 图像动画（将 PNG 组合到时间轴中）答案

【问题标题】：jQuery Image Animation (combining PNG into timeline)jQuery 图像动画（将 PNG 组合到时间轴中）
【发布时间】：2012-11-06 18:16:53
【问题描述】：

非常沮丧，我设法让我的代码几乎正常工作。我想为透明 png 图像列表制作动画。让它看起来和工作起来像 GIF。

我有 36 张图片。

1.png
2.png
3.png
..
36.png

但是由于某些原因，我的代码在“5.png”处崩溃 - 我添加了代码并将其设置为 1500 毫秒，以便您可以看到 Firebug 或发生的情况。图像存在。

jquery

// M2M Badge
$(function () {
    var i = 1;
    var interval = setInterval(function () {
        $('div.m2m_badge a img').attr({
            src: '//gc-cdn.com/ui/m2m/m/' + i + '.png'
        });
        i++;
        if (i === 36) i = 1; //38 images has been shown, stop the interval
    }, 1500); //50ms between each swap
});

jsfiddle

http://jsfiddle.net/VWyn9/8/

【问题讨论】：

对我来说很好用..没有错误..（在 Chrome 和 IE9 中测试）
我在 Chrome 上运行良好，您使用的是什么浏览器？
Firefox 和 Internet Explorer 又名他不能被命名（颤抖）
我记得回答过这个问题 :-) :stackoverflow.com/questions/12599648/… 在最新的 Firefox 中为我工作
对我来说很好。火狐16！ :)

标签： jquery animation jquery-animate

【解决方案1】：

您的代码有效，但我建议不要使用 36 张图片，因为它可能会加载缓慢。

一个不错的选择是有一个 sprite 文件（一个包含所有这些图像的文件）。然后，您可以将其设置为 div 的背景图像，并在每次迭代中更改背景位置以仅显示动画的一帧。

这样您将只加载一张图片（这将比加载 36 张图片快 18 倍），而且它肯定适用于每个环境。

【讨论】：

很棒的建议。有没有机会使用背景位置创建一些代码或示例？这是个好主意。