title: JQuery show/hide panel on hover
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/7528503/jquery-slidetoggle-timeout">JQuery slideToggle timeout</a>  </p>
  </blockquote>
  
  
  
  <p>I have simple html page:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
        $(document).ready(function() {
  
            $("div").hide();
  
            $("button").hover(function() {
                $("div").slideDown("slow");
            });
  
            setTimeout(hidepanel, 4000);
  
            function hidepanel() {
                if ($('div').is(':hover') === false) {
                    $('div').slideUp(); 
                }
            }
  
            $('div').mouseleave(function() { setTimeout(hidepanel, 4000); });
            $('button').mouseleave(function() { setTimeout(hidepanel, 4000); });
        });
    &lt;/script&gt;
  
    &lt;style&gt;
    div { width:400px; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button&gt;Toggle&lt;/button&gt;
    &lt;div style="border: 1px solid"&gt;
  
      This is the paragraph to end all paragraphs.  You
      should feel &lt;em&gt;lucky&lt;/em&gt; to have seen such a paragraph in
      your life.  Congratulations!
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I need:</p>
  
  <ol>
  <li>Show the panel (div) while mouse cursor is over the button or over the panel (div)</li>
  <li>Hide panel when mouse is not over button or panel for 4 seconds</li>
  <li>Hide panel immediately when I click on the page on any place outside the panel or button.</li>
  </ol>
  
  <p>What should I change im my code?</p>
  
  <p>Thanks a lot!</p>