0

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.

Community
  • 1
  • 1
Dominic P
  • 2,284
  • 2
  • 27
  • 46
  • I made a jsfiddle for this http://jsfiddle.net/bKZ4t/ – rwilliams Sep 25 '11 at 04:02
  • That's an interesting issue. I would recommend maybe using a different library/plugin that suites your needs. See [jquery horizontal slider](http://lxcblog.com/2010/10/14/jquery-horizontal-slider-sliding-doors-tabs/) or [jquery ease sliding menu](http://www.rgdesign.org/portfolio/2009/jquery.ease.slide.menu.v1/index_with_images.html) – Rusty Fausak Sep 25 '11 at 04:03
  • Thanks @rwilliams, that should make it a lot easier for people to work with. rfausak, thanks for the links. The jquery horizontal slider definitely looks promising except that you don't seem to be able to interrupt the animation while it's in progress to expand a different item. Its minor, but I am trying to allow that functionality in my implementation. – Dominic P Sep 25 '11 at 04:17

1 Answers1

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.

Dominic P
  • 2,284
  • 2
  • 27
  • 46
  • I recently revisited this code, and found a solution that produces no jitter at all. Instead of using jQuery animations, I'm using CSS transitions. Of course, I still fallback to jQuery animations for older browsers. – Dominic P Jun 20 '13 at 22:26