Animate div從中心到左側點擊

Question

我創建了佈局，並且卡住了動畫部分，因爲它可以在JSFiddle中看到，如果您從中心點擊任何框，則左側的相同導航將顯示與垂直佈局，中心塊將隱藏，這是工作正常，但要求是當點擊任何中心框時，它應該顯示左側導航，但它顯示一個動畫，所有那些中心導航正在向左移動一個接一個。

目前它的簡單顯示和隱藏工作，但我想添加動畫，將顯示框從中心位置移動到左邊位置，有人可以請幫助動畫或指導如何實現這一目標？

這裏是我所創建至今代碼：

<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>