title: jQuery slideDown vs. jQuery UI .show('slide')
body: <p>I'm trying to utilize jQuery's built in effect functionality to create a "drawer" that slides out from behind a navigation bar, pushing the content below it out of the way.</p>
  
  <p>If I use <code>$('#drawer').slideDown()</code>, the content is pushed out of the way, but the content does not actually "slide down." It's more of a wipe to reveal the content.</p>
  
  <p>If I use <code>$('#drawer').show('slide',{direction:'up'})</code>, the content correctly slides down, but all of the content below the element jumps out of the way before the effect occurs.</p>
  
  <p>Is there a way to combine the best of both of these to replicate the effect I'm looking for: a drawer that slides out, pushing the content below it out of the way?</p>
  
  <p>I've investigated jQuery UI's <code>.animate()</code> function, but the documentation is unhelpful. My crude efforts to utilize it have been fraught with failure.</p>
  
  <p>And, in case anyone asks, sorry, I can't show an example, but we would like it to function like the jQuery Drawer plugin:</p>
  
  <p><a href="http://lib.metatype.jp/jquery_drawer/sample.html" rel="noreferrer">http://lib.metatype.jp/jquery_drawer/sample.html</a></p>
  
  <p>But that plugin doesn't do quite what we need either, otherwise I'd just use that (not using a bulleted list or AJAX content). The effect there is what we want, however.</p>
  
  <p>UPDATE: I have also tried this part of the code via the jQuery Drawer plugin, but it doesn't animate at all:</p>
  
  <pre><code>$('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 });
  </code></pre>
  
  <p>To clarify, too, this is called within a function <code>OpenDrawer()</code> that is called thusly:</p>
  
  <pre><code>$(document).ready(function() {
      OpenDrawer();
  });
  </code></pre>
  
  <p>Because by default it will load when the page loads.</p>