Clearing timeouts during transitions

[ocon]

I am using a menu that expands/collapses in response to the user's mouse. The menu is initially collapsed but when the user mouses over it expands to full size. However, if the user removes the mouse from the menu, then after 500-ms, the menu shrinks back down to the collapsed size.

My problem is, if the user removes the mouse, returns the mouse, removes the mouse, etc, then the menu seems to stay open longer than the 500-ms from when the user last removed the mouse.

Is there a way to fix this? I've tried to clear the timer whenever the menu is in any transition, but it doesn't seem to work.

<div id="menu" onmouseover="menuOpen()" onmouseout="menuBlur()">...</div>

<script>
var menuTimer;

function menuOpen(){
clearTimeout(menuTimer);
$("#layers").animate({width:"158px",height:"137px"}, 400);}
function menuBlur(){
clearTimeout(menuTimer);
menuTimer = setTimeout("menuClose()", 500);}
function menuClose(){
clearTimeout(menuTimer);
$("#layers").animate({width:"70px",height:"22px"}, 400);}
</script>

[astupidname]

I think you probably need to cancel the .animate which may be in progress (I'm assuming this is jquery) by using the $('selector').stop() method, such as:

<script> 
var menuTimer; 

function menuOpen(){ 
    clearTimeout(menuTimer);
    $("#layers").stop(); 
    $("#layers").animate({width:"158px",height:"137px"}, 400);
} 
function menuBlur(){ 
    clearTimeout(menuTimer);
    $("#layers").stop();
    menuTimer = setTimeout(menuClose, 500);
} 
function menuClose(){ 
    clearTimeout(menuTimer);
    $("#layers").stop(); 
    $("#layers").animate({width:"70px",height:"22px"}, 400);
} 
</script>

[ocon]

Thank you, that seemed to work perfectly.