在 jQuery 中使用手风琴样式菜单时，有没有办法修复像素移动？
对于一个项目，我需要一些看起来很像 jQuery UI 的手风琴功能的功能，但我不使用 jQuery UI。但我注意到我的代码存在的问题也存在于 jQuery UI 手风琴中。所以我会用它作为例子。
以下是 jQuery UI 手风琴的链接： http://jqueryui.com/demos/accordion/
如果您请注意，当您单击“第 2 节”时，“第 4 节”按钮会向上移动几个像素，当动画完成时，它会向下移动几个像素以收回其位置。我注意到列表中的元素越多，当您激活列表顶部的动画时，“间隙”就越大。
起初，我认为这是由于关闭元素的动画没有与打开元素的动画同时开始而引起的。但是在我用谷歌搜索同时启动两个动画的解决方案后，我发现我正在使用正确的方法来做到这一点。
然后我想可能是缓动导致了这个问题，所以我在 animate() 中使用“线性”作为缓动选项。问题仍然存在。
有办法解决这个问题吗？确保最后一个元素在前两个元素动画时不会移动？
我这么问是因为我很确定我的客户会认为这是一个烦人的错误。
感谢您的帮助！
For a project, I need some functionality that looks a lot like the accordion feature of jQuery UI but I am not using jQuery UI. But I noticed that the problem I have with my code is present in the jQuery UI accordion also. So I'll use it as an exemple.
Here's the link to jQuery UI accordion : http://jqueryui.com/demos/accordion/
If you notice, when you click on "section 2", the "section 4" button moves up a few pixels and when the animation is completed, it moves a few pixels down to take back it's place. I noticed that the more elements you have in your list, the greater the "gap" is when you activate animations at the top of the list.
At first, I thought that it was caused by the animation of the closing element not starting at the same time as the opening element's animation. But after I googled for a solution to start two animations at the same time, I found out that I'm using the correct way to do it.
Then I thought that maybe the easing was causing that problem so I used "linear" as easing option in animate(). And the problem is still there.
Is there a way to fix that? To make sure that the last element will not move while 2 previous elements are animated?
I'm asking because I'm pretty sure that my client will see that as an annoying bug.
Thanks for your help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是一种解决方法，但如果您找不到更好的解决方案并且客户坚持修复它，您可以尝试此方法。在动画之前获取将要动画的元素下方的所有元素的绝对位置，并将所有这些元素设置为绝对位置。当动画结束时，恢复位置、顶部和左侧的默认样式值。
This is rather workaround but if you don't find better solution and the client will insist on fixing it you could try this. Just before the animation get the absolute position of all elements below the one that will be animated and set all that elements as absolute. When animation ends restore default style values for position, top and left.