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>