javascript - 修复 jQuery slideDown 动画末尾的垂直跳转

Question

我是 Jquery 的新手，但已经编写了一个简单的垂直 Accordion 。这似乎符合我要求的工作，但在向下滑动的末尾有一个明显的颠簸。

如果有人可以查看它并提出解决方案，它会阻止我再拔头发!

这是我的测试页面的链接(我的所有代码 [css、js 等] 都在一个文件中以方便使用):Vertical Accordion

Answer 1

在您的自定义代码中，我通过对 CSS 进行少量更改并在 Accordion 中指定 p 标签的高度来摆脱“跳跃”。

因为你通过脚本隐藏了它们，在你这样做之前:

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

也许您可以遍历并计算出每件作品的高度并将其添加到每个项目样式中，从而消除最后出现的“ SCSS ”。

沿着这些线的东西:

$('.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 - 通过在 Accordion 的每个“打开”部分设置一个明确的高度，它消除了抖动的动画。所以我们通过脚本设置这些高度。