在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;
}

我真的没有时间去调查这个修复程序为什么起作用的细节，但我想我还是会分享一下。