修复 jQuery SlideDown 动画末尾的垂直跳跃

Question

我是 Jquery 的新手，但写了一个简单的垂直手风琴。这似乎符合我所要求的工作，但在滑落结束时有明显的抖动。

如果有人能看一下它并提出一个解决方案，这将阻止我再拔头发！

这是我的测试页面的链接（为了方便起见，我的所有代码 [css、js 等] 都在一个文件中）： 垂直手风琴

Answer 1

在您的自定义代码中，我通过对 CSS 进行小更改并指定手风琴中 p 标签的高度来摆脱“跳转”。

由于您通过脚本将它们全部隐藏，因此在执行之前：

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

Answer 2

作为参考，以防其他人遇到此问题，以下内容对我有用：

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

我真的没有时间调查此修复程序为何有效的细节，但我想无论如何我都会分享。

Answer 3

我只需使用 overflow: auto 或 overflow: hide 就可以解决我的问题。我认为这是有效的，因为它忽略了元素的高度并会显示它可以显示的任何内容。只要高度不小，它就应该能够显示所有内容，但添加溢出属性可以使其过渡更平滑，因为它不计算高度。