Is there a way to fix the pixel movement when using accordion style menu with jQuery?

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.

开发者_Go百科

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!

---

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.