title: Jquery: preventing mass hover events until mouse is in element for 0.5 sec
body: <p>I have a list of menu items which use the hover event to show a dynamic area. The problem is that as the user moves over the individual menu items, each menu item triggers the toggle() event, resulting in a mass of show/hide events being fired before you get to the actual menu element you want.</p>
  
  <pre><code>    jQuery(".categoryPopupLink").hover(
              function () {
                      var str = jQuery(this).attr('id');
                      var id  = str.substring(str.indexOf("_") + 1);
  
                      jQuery (".categoryPopup:visible").toggle (750);
  
                      jQuery ("#categoryPopup_" + id).toggle (750);
                      return false;
              }
      );
  </code></pre>
  
  <p>How can I modify this code so that the toggle() events are only fired if the mouse remains over the menu element for a specific duration of time (for example, 0.5 sec). </p>