javascript - 如何修复 jQuery SlideToggle 动画故障？

Question

我正在尝试创建一个 FAQ 页面，我希望问题 block 在单击时向下滑动。虽然我已经达到了我想要的效果，但当它向后滑动时，动画出现了一些非常明显和烦人的故障，因为第二个 block 的标题突然向第一个 block 的标题靠拢。

我已经在整个 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);
});

Answer 1

slideToggle 是通过数学方式实现的动画，它将控制元素的高度、padding、margin。 .. 因此，如果您的 DOM 树很复杂，则很难维护，有时会导致此问题(例如忘记重置默认边距或填充)。

如果你不想看到那个 snap 问题。

需要用element包裹起来，设置一个min-height。这只是防止动画元素不影响其他元素的肮脏技巧。这些复杂结构中可能存在一些padding 或margin 导致此问题。 (在动画元素、它的子元素或某处)

像这样: https://jsfiddle.net/9r5akuxt/8/

如果使用 css3 transform 让它动起来会很棒。