在jQuery slideDown动画结束时修复垂直跳转

Question

我是Jquery的新手，但写过一部简单的垂直手风琴。 这似乎是我需要的工作，但在滑动结束时有一个可见的混蛋。

如果有人能看到它并建议解决方案，它将阻止我拉出我的头发！

这是我的测试页面的链接（我的所有代码[css，js等]都在一个文件中以方便）： Vertical Accordion

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: hidden来解决我的问题。 我认为这是有效的，因为它忽略了元素的高度，并将显示它可以做的任何事情。 只要不是一个很小的高度它应该能够显示一切，但添加overflow属性允许它更平滑地过渡，因为它不计算高度。