width： "hide" + width： "show"を使用したときのjQueryのアニメーショングリッチ

Question

私はこの問題をしばらく前に眺めていましたが、それが自分のコードかjQueryのものかどうかはわかりません。

$('elementA').animate({width: "hide", opacity: 0}); 
$('elementB').animate({width: "show", opacity: 1}); 

これは、サブメニューのに使用されます。

私は両方が、このようにBをAに崩壊し、拡大を目指しており、左浮かんだ二つの異なるリスト（AとB）に2つの同時.animateを（）やっています親トップメニュー項目がクリックされたときにポップアウトするはずの水平メニューバーに表示されます。問題は、指定された要素が折りたたまれた後すぐに "グリッチ"してしまい、実際に隠れる前に醜い1msの全幅レンダリングを作成するように見えるということです。問題はGoogle ChromeとFirefoxで確認されています（おそらくSafariでも）。どこに問題があります

などいくつかのコードがあまりにも過剰に見えるかもしれないことに注意してください http://jsfiddle.net/XehBN/
が、アカウントに複数のリストアイテムを取ることがあります：？

はここjsfiddle上のサンドボックスの例を見てください事前にみんなに感謝

編集、明確化：

代わりにピクセル単位でハードコードされたユニットの「非表示」と「ショー」を使用する理由は、私がなどの要素の合計幅を予見することはできませんということですテキストの長さが異なる複数のメニューリスト項目が存在する可能性があります。グリッチを生成するjQueryオートマティックなら、おそらく、生成された幅をjQueryで取得し、変数に保存してから、後で再度使用することは可能でしょうか？

Answer 1

私はanother jsfiddle exampleの自由を取った。私が行ったことは、終了サブメニューを1pxにアニメートしてスタイル属性を削除したことです（デフォルトスタイルを再び継承します）。

唯一の1pxであり、フェード効果が完了しているので、わずかなジャンプは実際には目立たない。

これはChromeでのみテストしたことに注意してください。他のブラウザではパフォーマンスがあまりよくありません。

うまくいけば、それはあなたに何かを与えることを望みます！