Animated Graphic Not Moving?!

[Tenaciousmug]

Ok I've been staring at this for the past 2 hours and I can't get it. I'm getting super frustrated.

I'm trying to make a graphic go from image 1 to 2, then 1, then 0 and then back to 1 then 2, etc. So 1,2,1,0,1,2,1,0. I'm starting that process when they click a button called "Start Dancing".. It won't even start dancing at all when I click the button. I don't know what's not reading and what is...

 

Here is my HTML:

<p><img id="animation" src="fatcat1.gif" alt="Fat Cat Dancing" /></p> 
<form>
<fieldset>
<button type="button" name="run" onclick="startDancing();">Start Dancing</button>
<button type="button" name="stop" onclick="clearInterval(begin);">Stop Dancing</button>
</fieldset>
</form>

 

And here is my Javascript:

	/* <![CDATA[ */
	var cats = new Array(3);
	var fatCat = 1;
	var begin; 
	cats[0] = "fatcat0.gif"; 
	cats[1] = "fatcat1.gif"; 
	cats[2] = "fatcat2.gif";

	function dance() {
		if (fatCat == 1){
			++fatCat;
			$("#animation").src = cats[fatCat];
		}
		else if (fatCat == 2){
			--fatCat;
			$("#animation").src = cats[fatCat];
			--fatCat;
		}
		else if (fatCat == 0){
			++fatCat;
	}

	function startDancing() {
		if (begin){
			clearInterval(begin);
			begin = setInterval("dance()",200);
		}
	}
/* ]]> */

 

PLEASE help!

[nogray]

The easiest way to do this is just to make a static gif and an animated gif. When the user click the button change the image src to the animated gif.

 

If you want to do it with javascript, you would create an array with all the frames (1,2,1,0) and loop through that array and replace the image for each frame

var position = 0;
var arr = ['img1.gif', 'img2.gif', 'img1.gif', 'img0.gif'];
function dance(){
    if (position >= arr.length) position = 0;
    document.getElementById('my_image_id').src = arr[position];
    position++;
}

not tested