スライドエフェクトを使用して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>