Я пытался вставлять и выводить DIV с помощью функции переключения jQuery, но результат всегда скачок в начале и / или конце анимации. Вот код js, который я использую:

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

И 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>

Вы также можете увидеть полный пример здесь:jQuery Slide test

Я обычно использую Mootools, и я могу сделать этот слайд без проблем с ним. Но я начинаю новый проект в Django, и большинство приложений в Django используют jQuery. Так для этого и после прочтения этогоJQuery против Mootools Я решил, что это будет хорошим поводом начать использовать jQuery. Поэтому моей первой потребностью было сделать слайд с этим DIV. И это не сработало должным образом.

Я провел дополнительный поиск и обнаружил, что это старая ошибка в jQuery с полями и отступами, примененными к DIV. Решение состоит в том, чтобы обернуть DIV в другой DIV. Это не исправило ситуацию в моем случае.

В поисках дальше я нашел этот постСкользящая анимация прыжка повторно, Это исправить прыжок на одном конце, но не на другом (Test2 вjQuery Slide test).

На переполнении стека я нашел этоjQuery IE анимация отрывистых слайдов, В комментариях я увидел, что проблема с тегом P внутри DIV. Если я заменю P-теги на DIV-теги, которые решают проблему, но это не является правильным решением.

Наконец я нашел этоСтранное поведение jQuery, Прочитав его, я понял, что проблема, решаемая переключением с тега P на DIV, заключалась в полях P (отсутствует в DIV) и коллапсе полей между элементами. Поэтому, если я переключу поля на отступы, это решит проблему. Но я теряю рушащееся поведение полей, которое я хочу.

Честно говоря, я могу сказать, что мой первый опыт работы с jQuery не очень хорош. Если я хочу использовать один из самых простых эффектов в jQuery, я должен не использовать правильную функцию (slideToggle), а вместо этого использовать некоторый код, сделанный вручную, И оборачивать DIV в другой DIV И переключать поля в отступы, портя мой макет.

Я пропустил более простое решение?

Как подсказывает krdluzni, я пытался написать как собственный скрипт с помощью метода animate. Вот мой код:

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;
});

Но это тоже не работает, потому что jQuery всегда устанавливает переполнение на видимое в конце анимации. Таким образом, DIV снова появляется в конце анимации, но накладывается на остальную часть контента.

Я попробовал также с UI.Slide (и Scale and Size). Это работает, но содержимое под DIV не перемещается с анимацией. Это только прыжок в конце / начале анимации, чтобы заполнить пробел. Я не хочу этого

ОБНОВИТЬ:

Одна часть решения состоит в том, чтобы динамически установить высоту контейнера DIV перед чем-либо. Это решить одним прыжком. Но не единственная причина разрушения маржи. Вот код:

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

ВТОРОЕ ОБНОВЛЕНИЕ:

Вы можете увидеть ошибку на собственном сайте jQuery на этой странице (пример B):Учебники: живые примеры jQuery

ТРЕТЬЕ ОБНОВЛЕНИЕ:

Пробовал с jQuery 1.4, больше никаких шансов :-(