如何使用幻灯片效果显示/隐藏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() {
	$('.inner').toggleClass('visible');
	$('.inner').animate({
		width: 'toggle',
	
	},500);
});

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

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

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

}

#button1 {    
    margin-right: 5px;
	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;">
	<button type="button" id="button1" class="btn btn-success">Menu</button>
    </div>
	<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>