Как исправить jQuery SlideToggle Анимация?

Я пытаюсь создать страницу часто задаваемых вопросов, и я хочу, чтобы блок вопросов скользил по щелчку. Хотя я добился того, чего хотел, когда он сместится, анимация имеет какую-то зацепку, которая очень очевидна и раздражает, поскольку заголовок второго блока приближается к названию первого.Как исправить jQuery SlideToggle Анимация?

Я искал все в stackoverflow для этой темы, но, несмотря на то, что проверил много вопросов и ответов, но ни один из них не работал на мой случай.

У меня есть демо-версия для вас here.

HTML:

<div id = "FAQ" class = "tab"> 
    <h1 id = "faq_title">FAQ</h1> 
    <h4 id = "general_questions_title">Questions:&nbsp; 
     <i class = "fa fa-eye eye-show-hide"></i> 
    </h4> 
    <div class = "questions" id = "general_questions"></div> 
    <h4 id = "financial_questions_title">Questions:&nbsp; 
     <i class = "fa fa-eye eye-show-hide"></i> 
    </h4> 
    <div class = "questions" id = "financial_questions"></div>

JQuery:

// Show category on click 
$(".eye-show-hide").on("click", function() { 
    // Toggle eye icon and make the others default 
    $(this).toggleClass("fa-eye fa-eye-slash"); 
    $(this).parent().siblings("h4").children().removeClass("fa-eye-slash").addClass("fa-eye"); 

    // Toggle category and close the others 
    $(this).parent().next().slideToggle(500).css("display", "inline-block"); 
    $(this).parent().next().siblings(".questions").slideUp(500); 
}); 

// Show answer on question click 
$(".questions ol li p").on("click", function() { 
    $(this).parent().next().slideToggle(500).css("display", "block"); 
    $(this).parent().next().siblings("p").slideUp(500); 
});

источник

2016-05-27 Angel Politis

Кажется, что не проблема для меня? (Использование Firefox) –

можете ли вы записать небольшой скринкаст об этой проблеме? кажется работает довольно хорошо но не гладко – twxia

@AngelPolitis да я знаю, но я думаю, что проблема с привязкой - это jQeury slidedown oringinal effect. он использует пробел управления математикой, маржу для имитации анимации. Я думаю, вы можете использовать CSS3-способ GPU: D – twxia

slideToggle одушевленного математическим способом, он будет контролировать элемент height, padding, margin ... так что трудно maintian если ваш DOM дерево является сложным, иногда вызывает это проблема (например, забыть сбросить значение по умолчанию или заполнить).

Если вы не хотите видеть эту проблему с привязкой.

Вам необходимо использовать элемент, чтобы обернуть его и установить на нем min-height. Это просто грязный взломать, чтобы анимирующий элемент не влиял на другой элемент. В этой сложной структуре могут возникнуть проблемы padding или margin. (На оживляющий элемент, его ребенок или где-то)

так: https://jsfiddle.net/9r5akuxt/8/

Это будет большой помощью CSS3 transform, чтобы оживить его.

источник

2016-05-27 10:02:09 twxia

Почему мини-высота решает это? –

Привет ~ @AngelPolitis Я описываю это в ответе – twxia

Есть ли причина добавления .css("display", "inline-block") после вызова slideToggle? Я думаю, что это то, что вызывает проблему, о которой вы говорите.

Смотрите эту скрипку: https://jsfiddle.net/9r5akuxt/7/

источник

2016-05-27 08:51:59

Да, он должен быть встроенным блоком, иначе он сбрасывает мое выравнивание. –

Сняв его, он все равно не исправил проблему. –

Как исправить jQuery SlideToggle Анимация?

ответ

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