Фиксация вертикального прыжка в конце анимации jQuery slideDown

Ответ 1

В вашем пользовательском коде я избавился от "прыжка", сделав небольшое изменение в CSS и указав высоту тэгов в аккордеоне.

Поскольку вы спрячете их все через script, прежде чем вы выполните:

$(".accordion p:not(:first)").hide(); 

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

Что-то в этом роде:

$('.accordion p').each(function(index) {
   $(this).css('height', $(this).height());
});

Изменить

Я пошел вперед и загрузил копию вашей страницы и протестировал ее, и, похоже, она работает хорошо в нескольких быстрых тестах браузера, так что вот ваш пересмотренный файл vaccordian.js:

$(document).ready(function(){   
    $('.accordion p').each(function(index) {
       $(this).css('height', $(this).height());
    });


    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();


    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

TL; DR - устанавливая явную высоту на каждой "открытой" части аккордеона, он удаляет отрывистую анимацию. поэтому мы устанавливаем эти высоты через script.

Ответ 2

Для справки, если кто-то другой сталкивается с этой проблемой, для меня работало следующее:

.ui-accordion .ui-accordion-content {
    overflow: auto;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

У меня нет времени для изучения деталей того, почему это исправление работает, но я думал, что я все равно поделюсь.

Ответ 3

Я смог исправить свою проблему, просто используя overflow: auto или overflow: hidden. Я думаю, что это работает, потому что игнорирует высоту элемента и покажет все, что может. Пока нет маленькой высоты, он должен иметь возможность показать все, но добавление свойства overflow позволяет ему перейти более плавно, потому что оно не вычисляет высоту.