jQueryのアニメーションのdivがびくびくアニメーションと「固定」要素

Question

リンクで終わります。 4つのボタンで区切られた2次のdivがあります。各ボタンは、画面の1つのコーナーを表します。だから私がbtn1を押すと、私のquadrativ divは左上隅にアニメーションする必要があります。 btn2はdivを右上にアニメーション表示する必要があります。 btn3左下a.s.o.

は今、2つの問題がある：私はすべての（前のアニメーションの後に1）のdivが貼付さをクリックした場合は 1.アニメーションはサファリ&クロム（それは他の1つのコーナーからジャンプ） 2に滑らかではありません左上隅にあります。

Firebugによると、私のdivは$ .animate（）によって適用されるCSSルールをすべて保持していると言いましたか？

ここにいる誰かが私を助けてくれることを願っています。

ありがとうございました。

Btw。 divは当初私のウィンドウの中央に配置されていたはずです:)

Answer 1

your jsfiddleを更新しました。基本的には、main-menuの静的な次元を含む要素を与えて、JavaScriptが位置を計算するためのものを持つようにしました。 DOMの準備が整ったら、JavaScriptを使ってドキュメントの「中心」にあるmain-menu要素を初期化しました（技術的には、これはスタイルシートで行う必要があります）。最後に、main-menu要素のすべての部分を明示的にアニメーション化するようにアニメーションを更新しました。

Answer 2

問題は、animateは、現在の値から指定した値にスムーズに移行します。 bottomが最初に設定されていないため、たとえば、左下のボタンをクリックすると、にアニメーション化するのではなく、0から10pxにアニメーション化されます。bottom

この問題を回避するには、アニメーションtopとleftのみを扱うことができます。別のオプションは、アニメーションを開始する前にCSSプロパティを初期化することです。