Я пытался вставлять и выводить 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 in 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 не перемещается с анимацией. Это только прыжок в конце / начале анимации, чтобы заполнить пробел. Я не хочу этого
UPDATE:
Одной из частей решения является динамическая установка высоты контейнера DIV перед чем-либо. Это решить одним прыжком. Но не единственная причина разрушения маржи. Вот код:
var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();
ВТОРОЕ ОБНОВЛЕНИЕ:
Вы можете увидеть ошибку на собственном сайте jQuery на этой странице (пример B):
Обучающие программы: живые примеры jQuery
ТРЕТЬЕ ОБНОВЛЕНИЕ:
Пробовал с jQuery 1.4, больше никаких шансов: - (