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

[Askhsiv]

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

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

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

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 утра гениальные решения отказываются посещать мою голову, вот и прошу хелпу

[PeaceCoder]

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 этот вопрос смотрю оч трудно емкий для многих начинающих анимашников.

[Askhsiv]

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

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

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

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

[PeaceCoder]

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