title: slideDown doesn't "hide" the element
body: <p>The animation I wanted to show/hide the order form works perfectly except one issue, the form does not hide on sliding down, a part of it is still visible.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="post"&gt;
      &lt;div class="post-content"&gt;
          &lt;a href="" class="order"&gt;&lt;/a&gt;
          ...
      &lt;/div&gt;
      &lt;div class="order-form"&gt;
          &lt;a href="" class="close"&gt;&lt;/a&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(".post .order").click(function () {
            $(this).fadeOut();
            $(this).parents('.post-content').slideUp();
            $(this).parents('.post-content').next('.order-form').show();
            $(this).parents().find('.close').fadeIn();
            return false;
      });
      $(".order-form .close").click(function () {
          $(this).fadeOut();
          $(this).parents('.order-form').slideDown();
          $(this).parents('.order-form').prev('.post-content').slideDown(function(){
              $(this).parents('.order-form').prev('.post-content').css('display', 'none');
          });
          $(this).parents().find('.order').fadeIn();
          return false;
      });
  </code></pre>
  
  <p>.. as you can see I tried <code>.hide()</code> but that doesn't work as expected, it disabled the slidedown animation which is required for a neat drawer (right word?) like effect.</p>
  
  <p>Thanks!</p>