title: How to add a wait time before hover function is executed
body: <p>I am working on a nested menu, and when my mouse move over a option, a sublist will show up.
  Here is my hover function:</p>
  
  <pre><code>$( ".sublist" ).parent().hover( function () {
      $(this).toggleClass("li_hover",300); //use to change the background color
      $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
  });
  </code></pre>
  
  <p>Now, I want add a short period before the sublist shows up to prevent the crazy mouse moving from user. Does somebody have a good suggestion on this?</p>
  
  <hr>
  
  <p>Update:</p>
  
  <p>Thanks for you guys, I did a little bit change on my program, recently it looks like this:</p>
  
  <pre><code>function doSomething_hover (ele) {
      ele.toggleClass("li_hover",300);
      ele.find(".sublist").toggle("slide", {}, 500);
  }
  
  $(function () {
      $( ".sublist" ).parent().hover( function () {
          setTimeout(doSomething_hover($(this)), 3000);
      });
  }):
  </code></pre>
  
  <p>This is weird that setTimeout will not delay anything. but if I change the function call to <code>doSomething_hover</code> (without "()"), the function will delay good. but i can not pass any jquery element to the function, so it still not works, could somebody tell me that how to make <code>doSomething_hover($(this))</code> work in <code>setTimeout</code> ?</p>
  
  <hr>
  
  <p>Update 2:
  Got the setTimeout work, but it seems not what I want:
  What I exactly want is nothing will happen, if the mouse hover on a option less than 0.5sec.</p>
  
  <p>Anyway, here is the code I make setTimeout work:</p>
  
  <pre><code>function doSomething_hover (ele) {
      ele.toggleClass("li_hover",300);
      ele.find(".sublist").toggle("slide", {}, 500);
  }
  
  $(function () {
      $( ".sublist" ).parent().hover( function () {
          var e = $(this);
          setTimeout(function () { doSomething_hover(e); }, 1000);
      });
  }):
  </code></pre>
  
  <hr>
  
  <p>Final Update:
  I got this work by using clearTimeout when I move the mouse out.
  so the code should be:</p>
  
  <pre><code>    $( ".sublist" ).parent().mouseover( function () {
          var e = $(this);
          this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
      });
  
      $( ".sublist" ).parent().mouseout ( function () {
          if(this.timer){
              clearTimeout(this.timer);
          }
          if($(this).hasClass("li_hover")){
              $(this).toggleClass("li_hover");
          }
          $(this).find(".sublist").hide("slide", {}, 500);
  
      });
  </code></pre>
  
  <p>This is the part in the <code>$(document).ready()</code>. Other code will be same as above.</p>
  
  <hr>
  
  <p>真. Final Update:
  So, <code>mouseover</code> and <code>mouseout</code> will lead to a bug sometime, since when I move the mouse to the sublist, the parents' <code>mouseover</code> event will be fire, and hide the sublist.
  Problem could be solved by using <code>hover</code> function:</p>
  
  <pre><code>    $( ".sublist" ).parent().hover( 
          function () {
              var e = $(this);
              this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
          },
          function () {
              if(this.timer){
                  clearTimeout(this.timer);
              }
              $(this).find(".sublist").hide("slide", {}, 500);
              if($(this).hasClass("li_hover")){
                  $(this).toggleClass("li_hover",300);
              }
          }
      );
  </code></pre>
  
  <p>Thanks all</p>