Я попытался вставить и отключить DIV с помощью функции переключения jQuery, но результат всегда неустойчив в начале и/или конце анимации. Вот код js, который я использую:
$(document).ready(function(){
$('#link1').click(
function() {
$('#note_1').parent().slideToggle(5000);
}
);
И HTML:
<div class="notice">
<p>Here 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 vs Mootools я решил, что это будет хороший повод начать использовать jQuery. Поэтому моя первая необходимость заключалась в том, чтобы спустить этот DIV. И это не сработало.
Я сделал больше поиска, и я обнаружил, что старая ошибка в jQuery с запасом и отступом применяется к DIV. Решение состоит в том, чтобы обернуть DIV в другой DIV. В моем случае это не помогло.
В дальнейшем я нашел этот пост Ожидаемая анимация Slidedown. Он фиксирует прыжок с одного конца, но не на другом (Test2 in jQuery Slide test).
В переполнении стека я нашел эту jQuery IE jerky слайд-анимацию. В комментариях я увидел, что проблема связана с тегом P внутри DIV. Если я заменяю теги P тегами DIV, которые исправляют проблему, но это не правильное решение.
Наконец, я нашел этот слайд слайда jQuery. Читая это, я понял, что проблема, разрешенная путем переключения с P-тега на DIV, была с полями P (не присутствующими в DIV) и сбрасыванием полей между элементами. Поэтому, если я переключу поля на paddings, это устранит проблему. Но я теряю рушится поведение полей, рушится, что я хочу.
Честно говоря, я могу сказать, что мой первый опыт работы с jQuery не очень хорош. Если я хочу использовать один из простейших эффектов в jQuery, я должен не использовать правильную функцию (slideToggle), а вместо этого использовать какой-то ручной код И обернуть DIV в другой DIV и переключить поля в paddings, испортить мой макет.
Я пропустил более простое решение?
Как подсказывает krdluzni, я попытался написать как пользовательский script с помощью метода 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(и масштаб и размер). Он работает, но контент ниже DIV не перемещается с анимацией. Он только прыгает в конце/начале анимации, чтобы заполнить пробел. Я не хочу этого.
UPDATE:
Одна часть решения заключается в том, чтобы динамически устанавливать высоту контейнера DIV перед чем-либо. Это решает один прыжок. Но не одна причина, сворачивая маржу. Здесь код:
var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();
ВТОРОЕ ОБНОВЛЕНИЕ:
Вы можете увидеть ошибку на собственном сайте jQuery на этой странице (пример B): Учебники: Live Примеры jQuery
ТРЕТЬЕ ОБНОВЛЕНИЕ:
Пробовал с jQuery 1.4, больше шансов: - (
