buondì.

sto creando un menu composto da immagini 40x40.
al mouseover le vorrei far ingrandire "dolcemente" ed al mouseout le voglio far ridurre.
codice:
var ingrandisci = function(id){
	imm = document.getElementById(id);
	h = imm.style.height.split("px");
	hgt = parseInt(h[0]);
	hgt += 5;
	if(hgt <= 100){
		imm.style.height = hgt+"px";
		setInterval(function () {ingrandisci(id);},30);
		} 
}


var riduci = function(id){
	imm = document.getElementById(id);
	h = imm.style.height.split("px");
	hgt = parseInt(h[0]);
	hgt -= 5;
	if(hgt >= 40){
		imm.style.height = hgt+"px";
		setInterval(function () {riduci(id);},30);
		} 
}
in questo modo non va
gli eventi che triggerano le funzioni sono:
codice:
... id='imm_menu_1' onmouseover="ingrandisci('imm_menu_1')" onmouseout="riduci('imm_menu_1')" />
...
... id='imm_menu_1' onmouseover="ingrandisci('imm_menu_2')" onmouseout="riduci('imm_menu_2')" />
...
//etc...
il fato è che se metto il mouse sopra l'immagine invece di ingrandirsi inizia a tremolare, in FF si impalla del tutto il browser, in IE inizia ad espandersi/ridursi senza sosta.

mi sapete dare un'idea?

grazie.