jQuery slide is jumpy

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

$(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 vs Mootools я решил, что это будет хороший повод начать использовать jQuery. Поэтому моя первая необходимость заключалась в том, чтобы спустить этот DIV. И это не сработало.

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

Поиск в дальнейшем Я нашел этот пост Slidedown animation jumprevisited. Он фиксирует скачок с одного конца, но не на другом (Test2 в jQuery Slide test).

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

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

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

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

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

UPDATE:

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

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

ВТОРАЯ UPDATE:

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

ТРЕТИЙ UPDATE:

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

jQuery slide is jumpy

ответ

Смежные вопросы