Animated Menu problem

[Fukushousha]

Hello all,I have been struggling to understand what the problem is here. I am trying to add javascript to various parts of my site. Checking around the net I saw that the best way to make an animated menu was to put the various frames one on top of the other and then clip from the image vertically. Also at the same time have a css with a :hover so you can jump to the last frame immediately if the user does not have jscript installed.My problem is that even though I got 9 dummy frames to check it, each 32 pixels height, the animation only plays the 2 first and then jumps to the last one. I am trying to figure out what the problem is but I can not understand. I will attach the code in this post and hope I can get some assistance by the time I wake up in the morning. I honestly can not think at this time of night The menu in html :

<div id="vMenu">	  <ul id="lmList">								<!-- The left side menu -->		<li><a id="current" href="Home.html">Home</a></li>		<li><a href="Products.html">Products</a></li>		<li><a href="Services.html">Services</a></li>		<li><a href="Support.html">Support</a></li>		<li><a href="Order.html">Order</a></li>		<li><a href="News.html">News</a></li>		<li><a href="About.html">About</a></li>	  </ul>	  </div>

The css part of the menu(the anchors specifically)

#vMenu li a {		  height: 21px;		text-decoration: none;		}		#vMenu li a:link, #vMenu li a:visited {		color: #CCC;		display: block;		background:  url(lvmenu.png);		padding: 8px 0 0 10px;		}	#vMenu li a:hover, #vMenu li #current {		color: #FFF;		background:  url(lvmenu.png) 0px -256px;		padding: 8px 0 0 10px;		}

And finally the javascript code:

function init() {  if(document.getElementById && document.createTextNode) {	var menu = document.getElementById('lmList');	var anchors = menu.getElementsByTagName('a');	for(var i=0, length=anchors.length;i<length;i++) {	  anchors[i].onmouseover= function() {		var offset = 256;		this.setAttribute('offset', offset);		this.style.backgroundPosition= '0px 0px';	  }	  anchors[i].onmouseout= function() {		var offset = 0;		this.setAttribute('offset', offset);	  }	}	animate();  }}function animate() {  var menu = document.getElementById('lmList');  var anchors = menu.getElementsByTagName('a');  for(var i=0, length=anchors.length;i<length;i++) {	var offset = anchors[i].getAttribute('offset');		if (offset<256) {	  offset = offset + 32;	  if(offset> 256) offset = 256;	  anchors[i].style.backgroundPosition= '0px -'+offset+'px';	  anchors[i].setAttribute('offset', offset);	}  }  setTimeout(animate, 200);}window.onload=init;

I would really appreciate any answer. I am sure it is something really simple and stupid but I can not spot it at this moment. Thanks in advance!

[justsomeguy]

First, if you haven't yet, install Firebug for Firefox. There's a link in my signature for it. It does a lot, but for now we can use the console to help figure out what is going on. Add several debug lines to the animate function. This won't work unless Firebug is installed and enabled:

function animate() {  console.log("animate start");  var menu = document.getElementById('lmList');  var anchors = menu.getElementsByTagName('a');  console.log("found " + anchors.length + " anchors");  for(var i=0, length=anchors.length;i<length;i++) {	var offset = anchors[i].getAttribute('offset');	console.log("item " + i + ": offset=" + offset);		if (offset<256) {	  offset = offset + 32;	  if(offset> 256) offset = 256;	  console.log("new offset=" + offset);	  anchors[i].style.backgroundPosition= '0px -'+offset+'px';	  anchors[i].setAttribute('offset', offset);	}  }  setTimeout(animate, 200);  console.log("animate end");}

When you load the page you should be able to open Firebug and click on the Console tab to see all of the messages. One thing you'll probably notice is that the animate function never stops.