Я новичок в JQuery, но написал простой вертикальный аккордеон. Мне кажется, что мне нужна работа, но в конце слайда есть видимый рывок.
Если бы кто-нибудь мог посмотреть на это и предложить решение, это остановит меня, чтобы вытащить еще мои волосы!
Вот ссылка на мою тестовую страницу (весь мой код [css, js и т.д.] доступен в одном файле для удобства): Вертикальный аккордеон
В вашем пользовательском коде я избавился от "прыжка", сделав небольшое изменение в 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.
Для справки, если кто-то другой сталкивается с этой проблемой, для меня работало следующее:
.ui-accordion .ui-accordion-content {
overflow: auto;
box-sizing: content-box;
-moz-box-sizing: content-box;
}
У меня нет времени для изучения деталей того, почему это исправление работает, но я думал, что я все равно поделюсь.
Я смог исправить свою проблему, просто используя overflow: auto или overflow: hidden. Я думаю, что это работает, потому что игнорирует высоту элемента и покажет все, что может. Пока нет маленькой высоты, он должен иметь возможность показать все, но добавление свойства overflow позволяет ему перейти более плавно, потому что оно не вычисляет высоту.