jQuery的组合选择png格式的一个图像时间轴动画(jQuery combine a select

动画是很难用GIF图像由于白色边框上的文本和其他像素化和抖动的问题。 所以我决定，尽管缺乏对IE尤其是PNG支持fadeIn或fadeOut造成黑边做对PNG jQuery效果。

我有这样一个文件夹

/cdn.com/ui/photo/1.png
/cdn.com/ui/photo/2.png
/cdn.com/ui/photo/3.png

这是我的HTML代码，是有安韦添加延迟或以某种方式循环和改变的源说1-38和不断循环它 - 甚至定制的延迟？ 我只是希望它保持顺畅循环，就像一个完全加载GIF ..

<div class="m2m_badge">
    <a href="#"><img src="///cdn.com/ui/photo/1.png"/></a>
</div>

这是我的jQuery

$(function()
{
    var i = 0;
    var interval = setInterval(function()
    {
        $('div.m2m_badge a img').attr({ src: '//gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            clearInterval(interval);
    }, 250);
});  

演示- http://jsfiddle.net/tXvuY/13/

Answer 1:

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

这里有一个演示

最终工作

具有连续循环只需添加i=1; 所述内interval if

$(function()
{
    var i = 1;
    var interval = setInterval(function()
    {
        $('img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            i=1; // SOLUTION
    }, 250); 
});   

---

文章来源: jQuery combine a selection of pngs to one image timeline animation