Слайд jQuery дергается ⇐ Jquery

[Anonymous]

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

Код: Выделить всё

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

И HTML:

Код: Выделить всё

Here's some text. And more text. Test1


Some content
More blalba

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

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

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

Поискивая дальше, я нашел этот пост «Пересмотр прыжка в анимации слайдов». Он исправляет скачок на одном конце, но не на другом (Test2 в тесте слайдов jQuery).

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

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

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

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

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

Код: Выделить всё

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 не перемещается вместе с анимацией. Он прыгает только в конце/начале анимации, чтобы заполнить пробел. Я не хочу этого.

ОБНОВЛЕНИЕ:

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

Код: Выделить всё

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

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

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

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

Пробовал с jQuery 1.4, больше шансов нет

Подробнее здесь: https://stackoverflow.com/questions/133 ... e-is-jumpy