Intenté deslizar dentro y fuera de un DIV con la función de alternar de jQuery, pero el resultado siempre es rápido al principio y / o al final de la animación. Aquí está el código js que utilizo:

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

Y el 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>

También puedes ver el ejemplo completo aquí:Prueba de deslizamiento jQuery

Usualmente uso Mootools y puedo hacer esta diapositiva sin ningún problema. Pero estoy empezando un nuevo proyecto en Django y la mayoría de las aplicaciones en Django usan jQuery. Así que para eso y después de leer esto.jQuery vs Mootools Decidí que sería una buena ocasión para comenzar a usar jQuery. Así que mi primera necesidad fue deslizar este DIV. Y no funcionó correctamente.

Hice más búsquedas y descubrí que es un error antiguo en jQuery con margen y relleno aplicado al DIV. La solución es envolver el DIV en otro DIV. No solucionó la cosa en mi caso.

Buscando más he encontrado este postSlidingown animación salto revisado. Se arregla un salto en un extremo pero no en el otro (Prueba2 enPrueba de deslizamiento jQuery).

En desbordamiento de pila encontré estojQuery IE animación de diapositivas desigual. En los comentarios vi que el problema está en la etiqueta P dentro del DIV. Si sustituyo las etiquetas P con etiquetas DIV que solucionan el problema, no es una solución adecuada.

Por ultimo encontré estoExtraña diapositiva de comportamiento de jQuery. Al leerlo, entendí que el problema se resolvió cambiando de la etiqueta P a DIV con los márgenes de la P (no presente en la DIV) y el colapso de los márgenes entre los elementos. Entonces, si cambio los márgenes a rellenos, soluciono el problema. Pero pierdo el comportamiento de colapso de los márgenes, colapsando lo que quiero.

Honestamente puedo decir que mi primera experiencia con jQuery no es realmente buena. Si quiero usar uno de los efectos más simples en jQuery, no tengo que usar la función adecuada (slideToggle), sino usar un código hecho a mano Y envolver el DIV en otro DIV Y cambiar los márgenes a los rellenos, desordenando mi diseño.

¿Me perdí una solución más simple?

Como sugiere krdluzni, intenté escribir como script personalizado con el método animate. Aquí está mi 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;
});

Pero eso tampoco funciona porque jQuery siempre establece el desbordamiento en visible al final de la animación. Así que el DIV vuelve a aparecer al final de la animación, pero se superpone al resto del contenido.

Intenté también con UI.Slide (y Escala y Tamaño). Funciona pero el contenido debajo del DIV no se mueve con la animación. Solo salta al final / inicio de la animación para llenar el vacío. No quiero eso

ACTUALIZAR:

Una parte de la solución es establecer dinámicamente la altura del contenedor DIV antes que nada. Esto soluciona un salto. Pero no la única causa al colapsar el margen. Aquí está el código:

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

SEGUNDA ACTUALIZACIÓN:

Puede ver el error en el sitio propio de jQuery en esta página (Ejemplo B):Tutoriales: Ejemplos en vivo de jQuery

TERCERA ACTUALIZACIÓN:

Probado con jQuery 1.4, no hay más posibilidades :-(