Need To Create A Animation With Javascript (mimic Gif) With Jpgs

I'm having a buch of jpegs coming from a old flash animation. They're named from 1000.jpg to 1092.jpg playing in that order. I tried to create a .gif animation with those pictures

Solution 1:

/*
You are trying to set the `src` of a `div`. Set the `src` of an `img` instead:

<div>
  <img id="logo" src="mypath/mylittlepony.jpg">
</div>
*/
this doesn't apply anymore since the question was edited...

Now this JSFiddle works as you want it, at least in my browser (Firefox 4.0.1).

EDIT start after load: look at this JSFiddle start after load and endless loop: look at this final JSFiddle extra gimmick: back and forth

You still do have a problem with caching. The animation is fluid only if all the images are cached. You could preload them by putting them as 1-px-imgs on your page.

<imgsrc="http://iflorian.com/test/image/1000.jpg"height="1"width="1"alt="" /><imgsrc="http://iflorian.com/test/image/1001.jpg"height="1"width="1"alt="" /><imgsrc="http://iflorian.com/test/image/1002.jpg"height="1"width="1"alt="" />
...
<imgsrc="http://iflorian.com/test/image/1050.jpg"height="1"width="1"alt="" />

Of course you can do this via JQuery, but then you could simply hold an array of image objects which replace the original image in the timer function.

Solution 2:

Just check on your Web Browsers' Error Console if Javascript is raising any error... because if any part of your JS raises an exception and fails to run then the effect might also fail. Happened to me at occassions.