jQuery slideDown vs. jQuery UI .show('slide')

Question

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.

Answer 1

Yes it is like the accordion behavior except that you can also slide it up. I have used this functionality to create what I think you are looking for.

$('#drawer').slideDown('slow');

By changing the speed you can get different slide speeds to look the way you want it. Now, even though you have the drawer element, you need a container that is initially hidden which is what will slide. Lets say you have a button with an id of "drawer", and a container with an id of "myDrawerContent." You would do the following,

$('#drawer').click(function() {
    $('#myDrawerContent').slideDown('slow');
}

$('#drw_loader').animate({ 
    height: $('#drw_ajax').height() }, 
    function () { $('#drw_loader').fadeOut(function () { $('#drw_ajax').fadeIn(); });
}); 

Hope this helps.

Metropolis

Answer 2

The javascript you have in your question update works, but it needs to operate on an element containing your content rather than the content itself.

To see this in action, surround the element #drawer with another div:

<div id='container'>
    <div id='drawer'>...</div>
<div>

And animate the container:

$('#container')
    .css({ marginTop: $('#container').height() * -1 })
    .animate({ marginTop: 0 });

Answer 3

I believe you're looking for an effect more like 'bind':

$('#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().