Estoy tratando de utilizar la funcionalidad de efecto incorporada de jQuery para crear un "cajón" que se desliza desde detrás de una barra de navegación, eliminando el contenido que está debajo.

Si yo uso$('#drawer').slideDown(), el contenido se elimina, pero en realidad no se "desliza hacia abajo". Es más de una limpieza para revelar el contenido.

Si yo uso$('#drawer').show('slide',{direction:'up'}), el contenido se desliza correctamente hacia abajo, pero todo el contenido debajo del elemento salta del camino antes de que se produzca el efecto.

¿Hay alguna manera de combinar lo mejor de estos dos para replicar el efecto que estoy buscando: un cajón que se desliza hacia afuera, empujando el contenido debajo de él?

He investigado jQuery UI's.animate() Función, pero la documentación es inútil. Mis esfuerzos crudos para utilizarlo han estado cargados de fracaso.

Y, en caso de que alguien pregunte, lo siento, no puedo mostrar un ejemplo, pero nos gustaría que funcione como el plugin jQuery Drawer:

http://lib.metatype.jp/jquery_drawer/sample.html

Pero ese complemento no hace exactamente lo que necesitamos, de lo contrario, solo usaría eso (sin usar una lista con viñetas o contenido AJAX). Sin embargo, el efecto es lo que queremos.

ACTUALIZACIÓN: También probé esta parte del código a través del complemento jQuery Drawer, pero no se anima en absoluto:

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

Para aclarar, también, esto se llama dentro de una funciónOpenDrawer() que se llama así:

$(document).ready(function() {
    OpenDrawer();
});

Porque por defecto se cargará cuando se cargue la página.