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

我是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属性允许它更平滑地过渡，因为它不计算高度。