jQueryで2つのDIVをスライドする

Question

高さがそれぞれ&の2つのDIVレイヤーが必要です。それぞれDIV1をクリックするとDIV2をロードするにはSlide from left to rightに、DIV2をクリックするとDIV1をロードするにはSlide from right to leftに移動する必要があります。私は以下のように動作していますが、時にはDIVが重複しておらず、2つのDIVが上下にスライドしています。

$("#div2").width("0"); 
$("#div1").click(function() { 
    $("#div1").animate({ width: 0 }, "slow"); 
    $("#div2").animate({ width: "100%" }, "slow"); 
}); 
$("#div2").click(function() { 
    $("#div2").animate({ width: 0 }, "slow"); 
    $("#div1").animate({ width: "100%" }, "slow"); 
}); 

誰も私よりも優れたコードでこの種のコードを手伝ってもらえますか？

Answer 1

ここで働い例です：

$(function() { 
    var $right = $("#right").width(0); 

    $("#slide").click(function() { 
     $("#left").animate({ width: 0 }); 
     $right.animate({ width: "100%" }); 
    }); 
}); 

jsFiddle

Answer 2

$("#div2").width("0"); 

$("#div1").click(myToggle('div1', 'div2')); 

$("#div2").click(myToggle('div2', 'div1')); 

function myToggle(open, close) { 
    $("#"+close).animate({ width: 0 }, "slow"); 
    $("#"+open).animate({ width: "100%" }, "slow"); 
}