animated navigation menu

[admin]

i am trying to make an animated drop down menu. it's a the point where everything works EXCEPT that if the user moves from one menu to another, the last menu opened will freeze halfway through the animation. here is the script:

var i = 10;

function animateNecklaces(direction){
if (direction == 1){show = "yes";}
else if (direction == 2){show = "no";}

neckbar = document.all.necklaces.style;

if (neckbar.top <= 40 + "px" && show == "yes"){
neckbar.top = i + "px";
i = i + 5;
}

if (neckbar.top > -10 + "px" && show == "no"){
neckbar.top = i + "px";
i = i - 5;
}

necklaceTime = setTimeout("animateNecklaces()",1);
if (neckbar.top <= '-10px' && show == "no"){clearTimeout(necklaceTime); i = 10;}
if (neckbar.top >= "45px" && show == "yes"){clearTimeout(necklaceTime); i = 10;}
}


function animateBracelets(direction){
if (direction == 1){show = "yes";}
else if (direction == 2){show = "no";}
menu = document.all.bracelets.style;

if (menu.top <= 40 + "px" && show == "yes"){
menu.top = i + "px";
i = i + 5;
}

if (menu.top > -10 + "px" && show == "no"){
menu.top = i + "px";
i = i - 5;
}

braceletTime = setTimeout("animateBracelets()",1);
if (menu.top <= '-10px' && show == "no"){clearTimeout(braceletTime); i = 10;}
if (menu.top >= "45px" && show == "yes"){clearTimeout(braceletTime); i = 10;}
}

the functions are called by:

SPAN CLASS="menu" ID="bracelets"
ONMOUSEOVER="animateBracelets('1');" ONMOUSEOUT="animateBracelets('2');"

it's pretty messy right now... streamlining will come after i get it to work
oh and it was set up so that one function handled both menus, but i wanted to try seperating the functions to see if it made a differeance. it didn't.
TIA