анимированное меню, многократный setInterval
 

доброго времени суток уважаемые коллеги, нуждаюсь в помощи!

вобщем делаю менюшку с движущимися тайтлами в разделах при наведении на них.

вот код функций:

function over(id)
{	
	timers = setInterval("move_right("+id+")", 5);
}

function out(id)
{	
	timers = setInterval("move_left("+id+")", 5);
}

function move_right(id)
{
	t = parseInt(document.getElementById('title_'+id).style.paddingLeft, 10);

	document.getElementById('title_'+id).style.paddingLeft = (t+2)+'px';

	if(t > 20) { clearInterval(timers); timers = null; }
}

function move_left(id)
{
	t = parseInt(document.getElementById('title_'+id).style.paddingLeft, 10);

	document.getElementById('title_'+id).style.paddingLeft = (t-2)+'px';

	if(t < 4) { clearInterval(timers); timers = null; }
}

и пэхэпэ:

for($i=0; $i<10; $i++)
	{
		echo "<div id='menu_".$i."' style='width:100px; margin-top:2px; background:#ccc' onmouseover='over(".$i.")' onmouseout='out(".$i.")'>
					<div id='title_".$i."' style='padding-left:0px'>Title_".$i."</div>
			</div>";	
	}

если на один раздел меню наводится, то всё прекрасно двигается, а если с одного раздела на другой передвинуть мышкой, запускается цикличная ошибка. я понимаю что дело в том, что новый элемент меню начинает пользовать те же функции, что и предыдущий, у которого ещё таймер не закончился и счётчики сбиваются. Но как же решить задачу, не 40 же функций делать (по 4 на каждый элемент меню)?

уже пару часов туплю, в 4 утра гениальные решения отказываются посещать мою голову, вот и прошу хелпу

function over(id){    
  document.getElementById('title_'+id)._state=1; 
  setTimeout("move_right("+id+")", 5);
  }
 
function out(id){    
  document.getElementById('title_'+id)._state=0; 
  setTimeout("move_left("+id+")", 5);
  }
 
function move_right(id){
  var e  = document.getElementById('title_'+id);
  if (!e._state) return;
  t = parseInt(e.style.paddingLeft, 10);
  e.style.paddingLeft = (t+2)+'px';
  if(t < 20) setTimeout("move_right("+id+")", 5);
  }
 
function move_left(id){
  var e  = document.getElementById('title_'+id);
  if (e._state) return;
  t = parseInt(e.style.paddingLeft, 10);

  e.style.paddingLeft = (t-2)+'px';
  if(t > 4) setTimeout("move_right("+id+")", 5);
  }

Вообще по поводу анимаций в блоге наверное скоро создам темку. Разработал функцию анимации намного превышающую возможности jQuery.animate этот вопрос смотрю оч трудно емкий для многих начинающих анимашников.

огромное спасибо!

единственное, если кто ещё будет брать код, в последней строчке надо поправить:

if(t >      2     ) setTimeout("move_     left     ("+id+")", 5);

буду ждать статью)

http://javascript.ru/blog/PeaceCoder...sto-o-slozhnom.