title: How to reverse height animate direction in jQuery?
body: <p>I have 2 divs like below;</p>
  
  <pre><code>&lt;div id="diva"&gt;diva&lt;/div&gt;
  &lt;div id="divb"&gt;divb&lt;/div&gt;
  </code></pre>
  
  <p>styled like;</p>
  
  <pre><code>div{
      display: block;
      overflow: hidden;
  }
  #diva{
      background-color: gray;
      width: 200px;
      height: 200px;
  }
  #divb{
      background-color: blue;
      width: 200px;
      height: 0px;
      margin-top: -40px;
  }
  </code></pre>
  
  <p>Div 2 has 0 height by default, but expands when mouse enters first div. JavaScript is;</p>
  
  <pre><code>$("#diva").mouseenter(function(){
      $("#divb").animate({ height: "40px" });
  }).mouseleave(function(){
      $("#divb").animate({ height: "0px" });
  });
  </code></pre>
  
  <p>Everything is working fine as it should. But I want to reverse the height animate direction of second div. Now, in present condition, the second div scrolls from top to bottom when mouse enters first div, and scrolls back from bottom to top when mouse leaves. But I want to reverse this. I want the div to expand from bottom to top when mouse enters, and want to shrink from top to bottom when the mouse leaves.</p>
  
  <p>How can I do this? <strong><a href="http://jsfiddle.net/a9vpS/1/" rel="nofollow noreferrer">Here</a></strong> is the working fiddle.</p>