我已经创建了一个布局，我被动画部分卡住了，正如在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"> </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"> </div>
</div>
</div>
<div class="row">
<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 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"> </div>
</div>
</div>
<div class="row">
<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"> </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"> </div>
</div>
</div>
<div class="row">
<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 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"> </div>
</div>
</div>
</div>
不可能设置display属性的动画，这是jQuery显示/隐藏函数切换的内容。相反，您可以通过将菜单定位在画布外(left: -320px(并在单击时将位置设置为left: 0来设置菜单的动画，然后根据自己的喜好添加过渡。大致如下(我从你的小提琴上编辑了代码(。
编辑：哦，等等，我想我有点误解了你想要的动画。我对我的答案进行了轻微的编辑，以使居中的方框也具有动画效果。
$(".content_box").click(function(){
$(".sidenav").css("left", "0");
$(".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">
<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>