jQuery Horizontal Accordion Jitter

Question

I know this is a fairly popular topic around here, but I'm hoping someone can help me with my particular implementation. I'm working on a design that uses jQuery animations to create an accordion menu, and it works, but I get a lot of jitter during the animation.

From my searching, the solution for this seems to be to animate all of the elements with one animate() object and a step() function to ensure synchronization. The problem is, I can't for the life of me, come up with a step() function that works.

Here is my latest attempt: http://www.3strandsmarketing.com/jq-test-v2.html

It works if you move your mouse slowly, but the code is kludgy to say the least, and if you move your mouse quickly it totally falls apart (btw, I've tried mitigating this with the hoverIntent plugin, but I didn't like the lag it added).

I think the answer maybe in JQuery Accordion Jitter Issue or Jitter in Jquery Accordion Implementation , but I lack the skill to adapt their code to my situation.

Also I really want to avoid the extra weight of adding jQuery UI if at all possible. Any help is greatly appreciate. Thanks.

Answer 1

Well, after several hours of tinkering, it's now 5am and I think I have it. I was eventually able to adapt the solution I referenced in my original question. I updated the jsfiddle that @rwilliams made with the new code, so if you're interested, you can see my adaptation there ( http://jsfiddle.net/bKZ4t/2/ ).

It works pretty well. Sadly though, the jitter is not completely gone. It is much less noticeable than it used to be though, and I think I'll just have to settle for that unless someone else can improve my implementation.

Thanks to all who contributed.