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>