クリックして中心から左にdivをアニメ化

Question

レイアウトを作成しましたが、ここではJSFiddleに表示されているように、アニメーション部分が残っています。左側の同じナビゲーションを中央からクリックすると表示されます中央のブロックは非表示になりますが、これはうまくいきますが、中央のボックスをクリックすると左のナビゲーションが表示されますが、それらの中心のナビゲーションはすべて1つずつ左に移動するアニメーションが表示されます。

現在はシンプルな表示と非表示を使用していますが、中央の位置から左の位置に移動するボックスを表示するアニメーションを追加したい場合は、誰かがアニメーションを手助けしたり、ここで

は、私がこれまでに作成したもののコードです：

<style> 
    .noPad{padding:0;} 
    .row {border-bottom: 1px solid #444;} 
    .col_box {border-right: 1px solid #444;} 
    .content_box{background:#f0f0f0; text-align:center; color:#000; font-size:18px; height:200px; display:block; width:100%; line-height:200px; cursor:pointer;} 
    .content_box:hover{background:#CCC;} 
    .sidenav {left: 0; position: fixed; top: 0; z-index: 1; font-size: 18px; background:#f0f0f0; width:320px; height:100%; display:none;} 
    .sidenav ul{list-style:none; padding:0; margin:0;} 
    .sidenav ul > h2{font-size:18px; color:#960000; text-transform:uppercase; text-align:center;} 
    .sidenav ul li{list-style:none;} 
    .sidenav ul li a{text-decoration:none; color:#404040; display:block; padding:15px 0 15px 25px; border-bottom:1px solid #ddd;} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script> 
$(".content_box").click(function(){ 
    $(".sidenav").show(); 
    $(".main-wrapper").hide(); 
    }); 
</script> 
<div class="sidenav"> 
    <ul> 
    <h2>Navigation Here</h2> 
    <li><a href="#">Navigation 1</a></li> 
    <li><a href="#">Navigation 2</a></li> 
    <li><a href="#">Navigation 3</a></li> 
    <li><a href="#">Navigation 4</a></li> 
    <li><a href="#">Navigation 5</a></li> 
    <li><a href="#">Navigation 6</a></li> 
    <li><a href="#">Navigation 7</a></li> 
    <li><a href="#">Navigation 8</a></li> 
</ul> 
</div> 
<div class="container-fluid main-wrapper"> 
<div class="row"> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box">&nbsp;</div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> Navigation 1 </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> Navigation 2 </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box">&nbsp;</div> 
</div> 
</div> 
<div class="row"> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box">&nbsp;</div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> Navigation 3 </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> Navigation 4</div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box">&nbsp;</div> 
</div> 
</div> 
<div class="row"> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box">&nbsp;</div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> Navigation 5 </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> Navigation 6</div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box">&nbsp;</div> 
</div> 
</div> 
<div class="row"> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box">&nbsp;</div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> Navigation 7 </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> Navigation 8</div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box"> </div> 
</div> 
<div class="col-md-2 col_box noPad"> 
    <div class="content_box">&nbsp;</div> 
</div> 
</div> 
</div> 

Answer 1

それはjQuerysは/非表示機能は、表示の切り替え何である、表示プロパティをアニメーション化することはできません。代わりに、キャンバスの外側（left: -320px）にメニューを配置し、クリックすると位置をleft: 0に設定し、好みに合わせてトランジションを追加することでメニューをアニメートできます。これらの行に沿って何か（私はあなたのフィドルからコードを編集しました）。

編集：ああ、待って、私はあなたがアニメーション化する方法を誤解していると思う。私は中心のボックスをアニメーション化するために私の答えを少し編集しました。

$(".content_box").click(function(){ 
 
\t $(".sidenav").css("left", "0"); 
 
\t $(".col_box").css("margin-left", "-100%"); 
 
});

.noPad{padding:0;} 
 
.row {border-bottom: 1px solid #444;} 
 
.col_box { 
 
    border-right: 1px solid #444; 
 
    width: 100%; 
 
} 
 
.col_box:nth-child(1) { 
 
    transition: all .2s ease-in; 
 
} 
 
.col_box:nth-child(2) { 
 
    transition: all .2s ease-in .2s; 
 
} 
 
.col_box:nth-child(3) { 
 
    transition: all .2s ease-in .4s; 
 
} 
 
.content_box{background:#f0f0f0; text-align:center; color:#000; font-size:18px; height:200px; display:block; width:100%; line-height:200px; cursor:pointer;} 
 
.content_box:hover{background:#CCC;} 
 
.sidenav { 
 
    left: -320px; 
 
    transition: all .2s ease-in .6s; 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 1; 
 
    font-size: 18px; 
 
    background:#f0f0f0; 
 
    width:320px; 
 
    height:100%; 
 
} 
 
.sidenav ul{list-style:none; padding:0; margin:0;} 
 
.sidenav ul > h2{font-size:18px; color:#960000; text-transform:uppercase; text-align:center;} 
 
.sidenav ul li{list-style:none;} 
 
.sidenav ul li a{text-decoration:none; color:#404040; display:block; padding:15px 0 15px 25px; border-bottom:1px solid #ddd;}

<div class="sidenav"> 
 
\t <ul> 
 
    <h2>Navigation Here</h2> 
 
    <li><a href="#">Navigation 1</a></li> 
 
    <li><a href="#">Navigation 2</a></li> 
 
    <li><a href="#">Navigation 3</a></li> 
 
    <li><a href="#">Navigation 4</a></li> 
 
    <li><a href="#">Navigation 5</a></li> 
 
    <li><a href="#">Navigation 6</a></li> 
 
    <li><a href="#">Navigation 7</a></li> 
 
    <li><a href="#">Navigation 8</a></li> 
 
    </ul> 
 
</div> 
 
<div class="container-fluid main-wrapper"> 
 
    <div class="row"> 
 
    <div class="col-md-2 col_box noPad"> 
 
     <div class="content_box"> Navigation 1 </div> 
 
    </div> 
 
    <div class="col-md-2 col_box noPad"> 
 
     <div class="content_box"> Navigation 2 </div> 
 
    </div> 
 
    <div class="col-md-2 col_box noPad"> 
 
     <div class="content_box"> Navigation 3 </div> 
 
    </div> 
 
    </div> 
 
</div>