title: jQuery Hide/Show with Slide on Hover... better way to do this?
body: <p>Basically having some trouble with using Hover to hide or show an item.  </p>
  
  <p>The idea is simple, on hover show a div.  When no longer hovering, hide it.  Problem is if the mouse hovers over the div and leaves too quickly, the show/hide div will stay visible.  I'm hoping this is something easily remedied and not a typical problem with the hover event.</p>
  
  <pre><code> jQuery
   (
     function() 
     {
       jQuery(".slideDiv").hide();
  
       jQuery(".mainDiv").hover
       (
         function() 
         {
           var children = jQuery(this).children(".slideDiv");
  
           if (children.is(":hidden")) 
           {
             children.show("slide", { direction: "left" }, 100);
           }
         },
         function() 
         {
            var children = jQuery(this).children(".slideDiv");
            children.hide("slide", { direction: "left" }, 100);
         }
       );
     }
   );
  </code></pre>
  
  <p>Styles look like:</p>
  
  <pre><code> .mainDiv
   {
     margin:5px;
     height:200px;
   }
  
   .slideDiv
   {
     background-color:Teal;
     float:left;
     height:200px;
     position:absolute;
     z-index:100;
   }
  </code></pre>
  
  <p>And markup</p>
  
  <pre><code>    &lt;div class="mainDiv"&gt;
          &lt;div class="showDiv"&gt;
              Hover me
          &lt;/div&gt;
          &lt;div class="slideDiv"&gt;
              Do you see me?
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div class="mainDiv"&gt;
          &lt;div class="showDiv"&gt;
              Hover me too
          &lt;/div&gt;
          &lt;div class="slideDiv"&gt;
              Do you see me now?
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>