jQuery Simulatenous animation

Question

グーグルを読み込んでもまだ問題を解決できない場合は、もう一度問題を解決する必要があります。 http://goo.gl/Ibcdp 右上を見ると、検索ボックスが表示されます。それは、フォーカスを実行する素晴らしいアニメーション効果があります。完全なスクリプトはここにある： http://goo.gl/VFBuk

今、私は（私は2つのクラス、通常の1、およびサーバサイドレンダリングitem_selectedクラス）を使用しての幅を拡大しています他のメニュー項目を縮小（2つのアニメーションイベントをしたいです検索コンテナdiv（#the_search_field）を完全に同時に実行すると、最後の2つの項目の間に数秒間の小さなギャップがどのようにして生成されているのかがわかります。

これは、アニメーション..また、firefoxでは、これはさらに減速し、その遅延のために、メニュー項目の幅の合計がコンテナの全幅を超えてオーバーフローし、スプリット秒間にすべてが破損します。 あなたの助けてくれてありがとう！

Answer 1

このデモページチェックアウト：

http://ejohn.org/files/sync

は、それが「ステップ」関数で行うのかを確認するために、ページのソースを表示します。

Answer 2

完全に壊れたFirefoxの問題を修正するには、#main_menuoverflow: hiddenとしてください。これは、項目が少し長すぎるときにフローが破損するのを防ぎます。

ギャップは、計算がリアルタイムで行われることによるものです。アニメーションは常にになるでしょう。これはアニメーション関数呼び出しが後で呼び出されるためです。これらを一緒にアニメーション化することで、これが目立つのを減らすことができますが、これを行うにはカスタムのタイムアウト/ステップ関数を記述する必要があります。 2つの異なるjQuery呼び出しを使用すると、各アニメーションキュー間のjQuery切り替えとDOM要素の更新のオーバーヘッドが発生します。これには時間がかかります。