Eu estou tentando utilizar a funcionalidade de efeitos internos do jQuery para criar uma "gaveta" que desliza para fora de uma barra de navegação, empurrando o conteúdo abaixo dele para fora do caminho.

Se eu usar$('#drawer').slideDown(), o conteúdo é empurrado para fora do caminho, mas o conteúdo na verdade não "desliza para baixo". É mais uma limpeza para revelar o conteúdo.

Se eu usar$('#drawer').show('slide',{direction:'up'}), o conteúdo desliza corretamente para baixo, mas todo o conteúdo abaixo do elemento salta para fora antes que o efeito ocorra.

Existe uma maneira de combinar o melhor de ambos para replicar o efeito que estou procurando: uma gaveta que desliza para fora, empurrando o conteúdo abaixo dele para fora do caminho?

Eu investiguei o jQuery UI's.animate() função, mas a documentação é inútil. Meus esforços grosseiros para utilizá-lo foram repletos de falhas.

E, caso alguém pergunte, desculpe, eu não posso mostrar um exemplo, mas gostaríamos que ele funcionasse como o plugin jQuery Drawer:

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

Mas esse plugin não faz exatamente o que precisamos, senão eu usaria isso (não usando uma lista com marcadores ou conteúdo AJAX). O efeito é o que queremos, no entanto.

UPDATE: Eu também tentei esta parte do código através do plugin jQuery Drawer, mas ele não anima em nada:

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

Para esclarecer, também, isso é chamado dentro de uma funçãoOpenDrawer() isso é chamado assim:

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

Porque, por padrão, ele será carregado quando a página for carregada.