Eu tentei deslizar para dentro e para fora um DIV com a função de alternância do jQuery, mas o resultado é sempre agitado no início e / ou no final da animação. Aqui está o código js que eu uso:

$(document).ready(function(){
    $('#link1').click(
        function() {
            $('#note_1').parent().slideToggle(5000);
        }
);

E o HTML:

<div class="notice">
    <p>Here's some text. And more text. <span id="link1">Test1</span></p>
    <div class="wrapper">
        <div id="note_1">
            <p>Some content</p>
            <p>More blalba</p>
        </div>
    </div>
</div>

Você também pode ver o exemplo completo aqui:teste de jQuery Slide

Eu costumo usar o Mootools e posso fazer este slide sem problemas com ele. Mas eu estou começando um novo projeto no Django e a maioria dos aplicativos no Django usam jQuery. Então, para isso e depois de ler istojQuery vs Mootools Eu decidi que será uma boa ocasião para começar a usar o jQuery. Então, minha primeira necessidade foi deslizar esse DIV. E não funcionou corretamente.

Fiz mais pesquisas e descobri que é um bug antigo no jQuery com margem e padding aplicado ao DIV. A solução é envolver o DIV em outro DIV. Não resolveu a coisa no meu caso.

Procurando mais eu encontrei este postAnimação Slidedown jumprevisited. Conserta um salto numa extremidade mas não na outra (Test2 emteste de jQuery Slide).

No Stack Overflow, encontrei estejQuery IE animação de slides irregular. Nos comentários vi que o problema é com a tag P dentro do DIV. Se eu substituir as tags P por tags DIV que corrigem o problema, mas isso não é uma solução adequada.

Por fim eu encontrei esteSlide de comportamento jQuery estranho. Ao lê-lo entendi que o problema resolvido pela mudança da tag P para DIV era com as margens do P (não presente no DIV) e o colapso das margens entre os elementos. Então, se eu mudar as margens para preenchimentos, conserte o problema. Mas perco o comportamento de colapso das margens, colapsando o que quero.

Honestamente, posso dizer que minha primeira experiência com jQuery não é muito boa. Se eu quiser usar um dos efeitos mais simples no jQuery eu não tenho que usar a função adequada (slideToggle), mas em vez disso, use algum código feito à mão e envolva o DIV em outras margens do switch DIV AND para preenchimentos, bagunçando meu layout.

Eu senti falta de uma solução mais simples?

Como krdluzni sugere, tentei escrever como script personalizado com o método animate. Aqui está meu código:

var $div = $('#note_2').parent();
var height = $div.height();

$('#link2').click(
    function () {
        if ( $div.height() > 0 ) {
            $div.animate({ height: 0 }, { duration: 5000 }).css('overflow', 'hidden');
        } else {
            $div.animate({ height : height }, { duration: 5000 });
        }

        return false;
});

Mas isso não funciona porque o jQuery sempre define o estouro para visível no final da animação. Assim, o DIV está aparecendo no final da animação, mas sobreposto ao resto do conteúdo.

Eu tentei também com UI.Slide (e escala e tamanho). Funciona, mas o conteúdo abaixo do DIV não se move com a animação. Ele só pula no final / início da animação para preencher a lacuna. Eu não quero isso.

ATUALIZAR:

Uma parte da solução é definir a altura do contêiner DIV dinamicamente antes de qualquer coisa. Isso resolve um salto. Mas não a causa pela margem em colapso. Aqui está o código:

var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();

SEGUNDA ATUALIZAÇÃO:

Você pode ver o bug no próprio site da jQuery nesta página (Exemplo B):Tutoriais: exemplos ao vivo de jQuery

TERCEIRA ATUALIZAÇÃO:

Tentei com jQuery 1.4, não mais chance :-(