簡単なアニメーションが必要な Web サイトのカスタム ヘッダーを作成しています。ヘッダーは同じサイズの 3 つの div で始まります。これらの div の 1 つがアクティブ化される (クリックされる) と、残りの div が縮小し、アクティブ化された div が拡大して水平スペースを埋めます。
ヘッダーは正常に機能しますが、div が拡大/縮小すると、ヘッダーの全体的な水平サイズが 1 ～ 2 ピクセル変化する傾向があり、ヘッダーが揺れるように見えます。ヘッダーを操作するときにヘッダーの右側に注目するとわかります。
コードを最も基本的な形式に単純化し、jsbin に追加しました。
http://jsbin.com/acikib/13/edit
ジッターを除去する方法、またはそれを回避できる実装へのより良いアプローチはありますか?