슬라이드 효과가있는 div를 표시하거나 숨기려면 어떻게해야합니까? Jquery

Question

저는 완전히 jQuery에 익숙하며 클릭 할 때 오른쪽에서 슬라이드하는 내비게이션 막대를 만들려고합니다.

slideToggle을 사용하여 내 div를 표시하고 숨기는 온라인 스 니펫을 찾았지만 부드럽게 오른쪽에서 슬라이드하려는 것처럼 보입니다. 내가 어디로 잘못 가고 있는지 알려주세요. 여기

는 jQuery를하다 :

$(document).ready(function(){ 

    $(".menu").hide(); 
    $("#drop-icon").show(); 

    $('#drop-icon').click(function(){ 
    $(".menu").slideToggle(1000); 

Answer 1

안녕하세요이 찾고있는 희망 아래 코드를 사용해보십시오. . . 코드는 적지 만 효과적입니다. 도움이 되길 바랍니다.

$('#button1').on('click', function() { 
 
\t $('.inner').toggleClass('visible'); 
 
\t $('.inner').animate({ 
 
\t \t width: 'toggle', 
 
\t 
 
\t },500); 
 
});

.toolbar { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    margin: 0px auto; 
 
    padding: 5px 0px; 
 
\t position: absolute; 
 
} 
 

 
#menu ul li{ 
 
    display: inline; 
 
\t padding:5px; 
 
\t margin:5px; 
 
\t width:100px; 
 
\t 
 
} 
 

 
.inner { 
 
    float: right; 
 
    display: none; 
 
\t padding-right: 5px; 
 
\t background-color:pink; 
 

 
} 
 

 
#button1 {  
 
    margin-right: 5px; 
 
\t justify:center: 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div style="text-align:center;"> 
 
\t <button type="button" id="button1" class="btn btn-success">Menu</button> 
 
    </div> 
 
\t <div class='toolbar'> 
 
    <div class="inner is-hidden"> 
 
     <div id="menu"> 
 
    <ul > 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
</div>