title: Jquery mouse over div slideUp and mouse out div slideDown
body: <p>Here is my code <strong><a href="http://jsfiddle.net/AB6J3/7/" rel="nofollow noreferrer">http://jsfiddle.net/AB6J3/7/</a></strong> you can see, edit, etc.</p>
  
  <p>When I roll over to red border box, the orange box should slide up and at mouse out it should slide down. it works well for the other way, but when I change slideDown to slideUp, it doesnt work :/ what am I missing?</p>
  
  <p>Appreciate helps.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
  div#monster { background:#de9a44; margin:3px; width:80px; height:40px; display:none; float:left; position:absolute; right:10px; top:0; }
  
  #clickk {width:40px; height:40px; background:#ccc; position:absolute; top:0; right:10px;}
  &lt;/style&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style="width:550px; padding:40px 0 0;margin:0 auto; border:1px solid #111; position:relative;"&gt;    
      &lt;div id="monster"&gt;&lt;/div&gt;
      &lt;div id="clickk"&gt;&lt;/div&gt;&lt;br /&gt;
      &lt;div style="width:500px; height:300px; background-color:#ccc; margin:0 auto;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $("#clickk").hover(function () {
      if ($("#monster").is(":hidden")) {
          $("#monster").slideDown("fast");
      } else {
          $("#monster").slideUp("fast");
      }
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>