jQuery のif文が上手くいきません。（訂正）

仕事の合間なので時間がかかってしまいましたが、やっと編集できました！
現在、こんな感じです。↓

$(function(){
 var duration=300;
 var duration2=500;

 $("#pc-page-box1").on("mouseover",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:0.6},
   duration);
 });
 $("#pc-page-box1").on("mouseout",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:1},
   duration);
 });

 $("#pc-page-box2").on("mouseover",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:0.6},
   duration);
 });
 $("#pc-page-box2").on("mouseout",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:1},
   duration);
 });

 $("#pc-page-box3").on("mouseover",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:0.6},
   duration);
 });
 $("#pc-page-box3").on("mouseout",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:1},
   duration);
 });

 $("#pc-page-box4").on("mouseover",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:0.6},
   duration);
 });
 $("#pc-page-box4").on("mouseout",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:1},
   duration);
 });

 $("#pc-page-box5").on("mouseover",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:0.6},
   duration);
 });
 $("#pc-page-box5").on("mouseout",function(){
  $(this).find(".black-sheet").stop(true).animate({
   opacity:1},
   duration);
 });
});

$(function(){
 var duration=300;
 $(document).on('click', '.leftBoxParent', function(){
  $(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);
  $(this).find('.leftBox').stop(true).animate({left:300}, duration);
 });
});

$(function(){
 var duration=300;
 $(document).on('click', '.rightBoxParent', function(){
  $(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);
  $(this).find('.rightBox').stop(true).animate({right:300}, duration);
 });
});

body,td,th {
 font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
h1,h2,h3,h4,h5,h6 {
 font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
.img_box {
 position:relative;
 display:block;
 margin:0;
 padding:0;
}
.img_box img {
 z-index:0;
 margin:0;
 padding:0;
}
.img_box a {
 color:white;
 font-size:70px;
}

.img_comment2 {
 font-size:70px;
 font-family: 'Oswald', sans-serif;
 font-weight:300;
 position:absolute;
 bottom:150px;
 left:0px;
 z-index:1;
 text-align:left;
 padding:10px;
 margin:0;
 text-shadow:3px 3px 3px #000;
}

.pages{
 display:block;
 float:left;
 position:relative;
}
.comments{
 font-size:70px;
 font-family: 'Oswald', sans-serif;
 font-weight:300;
 color:white;
 position:absolute;
 bottom:150px;
 left:150px;
 z-index:1;
 text-align:center;
 padding:10px;
 margin:0;
 text-shadow:3px 3px 3px #000;
}
.japanese-font{
 font-family:"Noto Sans";
 font-size:18px;
 font-weight:bold;
 color:white;
 position:absolute;
 bottom:100px;
 left:150px;
 z-index:1;
 text-align:center;
 padding:10px;
 margin:0;
 text-shadow:3px 3px 3px #000;
}

body{

}

/*.gridContainer {
width: 88.5%;
max-width: 1300px;
padding-top:50px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}*/

#pc-wrapper{
 display:block;
 width:1300px;
 height:1800px;
 margin:0 auto;
}
#pc-wrapper p{
 margin:0;
}
#pc-wrapper img{
 display:block;
}
#pc-header-box{
 display:block;
 position:relative;
 width:1300px;
 height:800px;
 margin:0 auto;
 vertical-align:bottom;
}
.pc-header-title{
 display:inline-block;
 position:absolute;
 font-size:60px;
}

#pc-logo-box{
 display:block;
 position:relative;
 width:1300px;
 height:200px;
 margin:0 auto;
}
#pc-logo-box img{
 display:block;
 position:relative;
 top:50px;
 margin:0 auto;
}

#pc-page-box1{
 display:block;
 position:relative;
 width:650px;
 height:430px;
 float:left;
 overflow:hidden;
}
#pc-page-box2{
 display:block;
 position:relative;
 width:650px;
 height:430px;
 float:left;
 overflow:hidden;
}

#pc-page-box3{
 display:block;
 position:relative;
 width:650px;
 height:430px;
 float:left;
 overflow:hidden;
}
#pc-page-box4{
 display:block;
 position:relative;
 width:650px;
 height:430px;
 float:left;
 overflow:hidden;
}
#pc-page-box5{
 display:block;
 position:relative;
 width:650px;
 height:430px;
 float:left;
 overflow:hidden;
}

.black-sheet{
 display: block;
 position: absolute;
 width: 650px;
 height: 430px;
 background: rgba(0,0,0,0.8);
 z-index: 1;
}
.pc-page-title{
 display:block;
 position:absolute;
 font-size:30px;
 color:rgba(255,255,255,1);
 z-index:2;
}
.pc-page-title-japanese{
 display:block;
 position:absolute;
 top:30px;
 font-size:24px;
 color:rgba(255,255,255,1);
 z-index:3;
}
#we-are-infobox{
 display:block;
 position:absolute;
 left:-300px;
 width:300px;
 height:300px;
 background:rgba(51,153,204,1);
 opacity:1;
 z-index:5;
}
#info-infobox{
 display:block;
 float:right;
 position:absolute;
 right:-300px;
 width:300px;
 height:300px;
 background:rgba(51,153,204,1);
 opacity:1;
 z-index:5;
}
#price-infobox{
 display:block;
 position:absolute;
 left:-300px;
 width:300px;
 height:300px;
 background:rgba(51,153,204,1);
 opacity:1;
 z-index:5;
}
#blog-infobox{
 display:block;
 float:right;
 position:absolute;
 right:-300px;
 width:300px;
 height:300px;
 background:rgba(51,153,204,1);
 opacity:1;
 z-index:5;
}
#contact-us-infobox{
 display:block;
 position:absolute;
 left:-300px;
 width:300px;
 height:300px;
 background:rgba(51,153,204,1);
 opacity:1;
 z-index:5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gridContainer">
    <div id="pc-wrapper">
        <div id="pc-header-box">
            <p><div class="pc-header-title">Welcome to our website"</div>
            </p>
        </div>

        <div id="pc-logo-box">
        </div>

        <div id="pc-page-box1" class="leftBoxParent">
            <p>
            <div class="pc-page-title">We Are</div><div class="pc-page-title-japanese">私たちについて</div>
            <div id="we-are-infobox" class="leftBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box2" class="rightBoxParent">
            <p><div class="pc-page-title" >Info</div>
            <div class="pc-page-title-japanese">お知らせ</div>
            <div id="info-infobox" class="rightBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box3" class="leftBoxParent">
            <p><div class="pc-page-title">Price</div><div class="pc-page-title-japanese">プライス</div>
            <div id="price-infobox" class="leftBox"></div><div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box4" class="rightBoxParent">
            <p><div class="pc-page-title">Blog</div><div class="pc-page-title-japanese">ブログ</div>
            <div id="blog-infobox" class="rightBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box5" class="leftBoxParent">
            <p><div class="pc-page-title">Contact Us</div>
            <div class="pc-page-title-japanese">メール</div>
            <div id="we-are-infobox" class="leftBox">
            </div><div class="black-sheet"></div>
            </p>
        </div>
    </div>
</div><!--end gridContainer-->

まずは状況から説明させていただきます。

モニターの可視領域を作り、その中にボタンを4つ作りました。
btnA B C D　という風です。

それから、モニターの不可視領域にコンテンツABCDを作りました。

イラストαの状況です

イラストα
イラストβ

次にそれぞれのbtnにプログラムしたいです。
・btnAをクリックしたら、不可視領域にあるAが左から右へスライドしてきて、可視領域の中央に配置される。

イラストβの状況です。

また、btnA C は「左から右へ」、btnB Dは「右から左へ」動かしたいです。

自分の知識でできる範囲で作ってみました。

if文を使って動かすべきなのかどうか、よくわからず、とにかく動くようにプログラミングしてみました。
しかし、右セクションはは右、左セクションは左とセパレートになってしまっていますが、本来は、右が動いていて、もし、左を押したら、右は右に戻って、左は左から出てくるという動きにしたいです。。

教えてください。

お願いいたします