jQuery slideDown vs. jQuery UI .show('slide')
javascript, jquery, jquery-ui
Solution
I believe you're looking for an effect more like 'blind':
$('#drawer').show('blind');
It's odd that $.fn.slideDown() and $.fn.show('slide') don't operate the same way, but rather 'blind' does. 'slide' creates a placeholder the size of your object and then slides into the frame of view, while blind adjusts the height or width of your element until it expands to the correct size (while overflow is set to hidden). So actually, the effect names are correct, but there's some confusion because of the legacy name $.fn.slideDown().
Problem
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. If I use `$('#drawer').slideDown()`, 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. If I use `$('#drawer').show('slide',{direction:'up'})`, the content correctly slides down, but all of the content below the element jumps out of the way before the effect occurs. 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? I've investigated jQuery UI's `.animate()` function, but the documentation is unhelpful. My crude efforts to utilize it have been fraught with failure. And, in case anyone asks, sorry, I can't show an example, but we would like it to function like the jQuery Drawer plugin: http://lib.metatype.jp/jquery_drawer/sample.html 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. UPDATE: I have also tried this part of the code via the jQuery Drawer plugin, but it doesn't animate at all: ``` $('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 }); ``` To clarify, too, this is called within a function `OpenDrawer()` that is called thusly: ``` $(document).ready(function() { OpenDrawer(); }); ``` Because by default it will load when the page loads.