CODEWITHSUNDEEP
jqueryanimation
Jeemusu
Jeemusu

Reputation: 10533

1-2 Pixel Jitter Animating Horizontal Accordion

I am building a custom header for a website that requires some simple animation. The header starts off with 3 divs of the same size, when one of these divs is activated (clicked) the remaining divs shrink while the activated div expands to fill the horizontal space.

The header works fine, but when the divs expand/shrink there tends to be a 1-2 pixel change in the overall horizontal size of the header which makes the header appear to jitter. It can be seen if you focus on the right side of the header when interacting with it.

I've simplified my code down to it's most basic form and added it into a jsbin.

http://jsbin.com/acikib/13/edit

Is there any way to remove the jitter, or a better approach to the implementation that could avoid it?

Upvotes: 0

Views: 349

Answers (1)

John Koerner
John Koerner

Reputation: 38077

Your math is off. Change your max width to 816 instead of 818.

Your CSS states that each block is 296, so 296*3 = 888. Your Javascript was telling the large block to be 818 and the small blocks to be 36. 818+36*2 = 890.

So you were increasing the total size of your boxes by 2 pixels, which caused the jagged animation the first time.

http://jsbin.com/acikib/20/edit

Upvotes: 1

Related Questions