jquery - 单击时从中心向左动画 div

Question

我已经创建了一个布局，但我被动画部分困住了，因为它可以在 JSFiddle 中看到，如果您从中心单击任何框，则左侧的相同导航显示为垂直布局，并且中心 block 将隐藏，这工作正常但要求是当单击任何居中的框时，它应该显示左侧导航但是它显示了一个动画，所有那些居中的导航都一个一个地向左移动。

目前它使用简单的显示和隐藏，但我想添加动画来显示盒子从中心位置移动到左侧位置，有人可以帮助制作动画或指导如何实现吗？

以下是我目前创建的代码:

<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

无法为 display 属性设置动画，这是 jQuery 显示/隐藏函数切换的内容。相反，您可以通过将菜单定位在 Canvas 外 (left: -320px) 并在单击时将位置设置为 left: 0 来为菜单添加动画效果，然后将过渡添加到你喜欢。这些方面的东西(我从你的 fiddle 中编辑了代码)。

编辑:哦，等等，我想我有点误解了您想要制作动画的方式。我对我的答案进行了轻微的编辑，以使居中的框也具有动画效果。

$(".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>