timing methods used in example #10

Example #10: fading submenus with user friendly timeouts

Menu navigation is frustrating when the submenu closes immediately on mouseleave, because sometimes the mouse pointer moves few pixels unintended. That's why we want to build in timeouts on mouseenter and mouseleave to show/hide the corresponding submenu.

With jquery-timing this is just two lines: 

$('#menu li')
  .mouseenter($).unwait().wait(200).children('ul').fadeIn()
  ._.mouseleave($).unwait().wait(300).children('ul').fadeOut();​
⇒
​

Other examples with animations

Other examples with context switch

Other examples with inline attached events

Other examples with timeouts