Welcome to WebmasterWorld Guest from 18.206.194.83

Forum Moderators: open

Message Too Old, No Replies

Clearing timeouts during transitions

     
3:59 am on Aug 24, 2011 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:227
votes: 1


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>
8:50 am on Aug 24, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 18, 2008
posts:408
votes: 0


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>
1:45 pm on Aug 24, 2011 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:227
votes: 1


Thank you, that seemed to work perfectly.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members