title: jQuery combine a selection of pngs to one image timeline animation
body: <p>Animation is difficult with GIF images due to white borders on text and other pixelation and dithering issues. So I have decided despite the lack of support for PNG on IE especially <code>fadeIn</code> or <code>fadeOut</code> jQuery effects on PNG causing black borders to do it.</p>
  
  <p>I have a folder like</p>
  
  <pre><code>/cdn.com/ui/photo/1.png
  /cdn.com/ui/photo/2.png
  /cdn.com/ui/photo/3.png
  </code></pre>
  
  <p>This is my HTML code, is there anway to add a delay or somehow loop and change the source of say 1-38 and keep looping it - maybe even customize the delay? I just want it to keep looping smoothly like a fully load gif..</p>
  
  <pre><code>&lt;div class="m2m_badge"&gt;
      &lt;a href="#"&gt;&lt;img src="///cdn.com/ui/photo/1.png"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my jQuery</p>
  
  <pre><code>$(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);
  });  
  </code></pre>
  
  <p>Demo - <a href="http://jsfiddle.net/tXvuY/13/" rel="nofollow">http://jsfiddle.net/tXvuY/13/</a></p>