Исправление вертикального прыжка в конце анимации jQuery slideDown - PullRequest
Новая
       12

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

12 голосов
/ 07 декабря 2010

Я новичок в Jquery, но написал простой вертикальный аккордеон. Это похоже на работу, которая мне требуется, но в конце слайда внизу виден рывок.

Если бы кто-нибудь мог взглянуть на это и предложить решение, это помешало бы мне больше вырывать мои волосы!

Вот ссылка на мою тестовую страницу (весь мой код [css, js и т. Д.] В одном файле для удобства): Вертикальный Аккордеон

Ответы [ 3 ]

16 голосов
/ 07 декабря 2010

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

Поскольку вы скрываете их все с помощью скрипта,прежде чем сделать: 

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

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

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

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

Редактировать

Я скачал копию вашей страницы и проверил это, и, кажется, он отлично работает в нескольких быстрых тестах браузера,Итак, вот ваш пересмотренный respvid.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 - устанавливая явную высоту на каждой «открывающей» части аккордеона, он удаляет анимацию рывков.поэтому мы устанавливаем эти высоты с помощью скрипта.

4 голосов
/ 02 июля 2015

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

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

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

0 голосов
/ 22 декабря 2015

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

...