jquery - JQuery UI の非表示/表示の div 位置が Chrome でジャンプする

Question

JQuery UI を使用して、ページ上の div を非表示にし、別の div を表示するボタンを作成しました。

内部に 2 つの表示 div と 1 つの非表示 div を持つラッパー div があります。最初に表示される div は移動しません。ボタンを押すとdiv2が隠れていてdiv3が出てきます。ボタンを押すと、div 2 と div 3 が画面から「ドロップ」/インします。Chrome でのこのアニメーションでは、位置がめちゃくちゃになります。

この問題は IE や Firefox では発生しません。

問題は次のとおりだと思います。

-float:right の div2 と div3 のいずれか、または

-display:none div3 では、div3 が表示されていた場合に壊れたアニメーションが発生するように見えるためです。

両方の div を右側に配置する必要があるため、可能であれば float:right を維持する必要があります。

コード例と jsfiddle へのリンクを次に示します (Chrome を使用してください)。

http://jsfiddle.net/mZtWY/4/

    #wrapper {
        width: 300px;
        height: 150px;
        border: 1px solid black;
    }
    #box1 {
        width: 150px;
        height: 100px;
        border: 1px solid blue;
        display: inline-block;
    }
    #box2 {
        width: 120px;
        height: 120px;
        border: 1px solid yellow;
        float: right;
        display: inline-block;
    }
    #box3 {
        width: 120px;
        height: 120px;
        border: 1px solid red;
        float: right;
        display: inline-block;
        display:none;
    }

このすべてを読むために時間を割いてくれた場合は、事前に感謝します!