jQueryのshow "show（）"をaprubtlyの代わりに使用しているときに、隣接するdivを "緩和"

Question

Microsoft Azureのオンラインポータルのようなフライアウトパネルメカニズムを設計しています。とにかく、ポータルはメニュー用にこのフライアウトパネル機構を備えています。新しいサブメニューを開くと、左から右に表示されます。パネルのコンテナはページの左に揃えられます。

これまでのところとても良いです。しかし、画面の右側にパネルが必要です。私はすでに解決策を考え出しましたが、私の唯一の問題は、新しいフライアウトパネルを追加するときに、隣接している場所を再配置してからshow()関数を使用してスライドアウトすることです。

https://jsfiddle.net/9ogn0kx4/1/

基本的に、私はそれがビューにスライドすることが出隣人の容易にする新しいパネルのために必要。私はあなたが私の愚痴を理解できることを願っています。

HTML：

<div id="flyoutcontainer" class="parentflyout"> 
    <div class="childflyout" style="display:block;"> 
     <button onclick="openNewFlyout('#flyoutcontainer')">OpenNew</button> 
     <button onclick="closePanel('#flyoutcontainer')">Close</button> 
    </div> 
</div> 

CSS

/*Temp*/ 
body, html{height: 100%;} 
.parentflyout{ 
    height:100%; 
} 
.childflyout:first-of-type{ 
    width:200px; 
} 
.childflyout:nth-of-type(2){ 
    overflow:hidden; 
} 
.childflyout{ 
    border:1px solid black; 
    width: 340px; 
    float:right; 
    height:100%; 
    display: none; 
} 

jQueryの

function openNewFlyout(containerid){  
    var newFlyout = $('<div class="childflyout"></div>'); 
    var appended = $(containerid).prepend(newFlyout); 
    newFlyout.show('slide', {direction: 'right'}, 800); 
} 
function closePanel(containerid){ 
    $(containerid + ' .childflyout:first-of-type').remove(); 
} 

EDIT：

は、ここで私は基本的に何を意味するかです。赤いボックスの「アニメーション」は、現在どのように動作しているかを示します。しかし、私はそれがグリーンボックスに描かれているように動作する必要があります。 [OK]を

Answer 1

は、アニメーション機能を検討していた後、私は実用的なソリューションを思い付きました。代わりに

function openNewFlyout(containerid){  
    var newFlyout = $('<div class="childflyout"></div>'); 
    var appended = $(containerid).prepend(newFlyout); 
    newFlyout.show('slide', {direction: 'right'}, 800); 
} 

の私は、この

function openNewFlyout(containerid) { 
    var newFlyout = $('<div class="childflyout"></div>'); 
    var appended = $(containerid).prepend(newFlyout); 
    newFlyout.animate({width:'toggle'},350); // This is different 
} 

が必要また、私が作業コードでそれを更新し、私の質問に私のjsfiddleリンクを確認することができます。

Pauli_Dがクレジットを希望する場合、彼は私の質問に答えることができ、私は彼の答えを受け入れます。そうでなければ、私はできるだけこれを受け入れるだけです。