单击另一个锚点时，jQuery动画返回到原始位置

Question

单击花药锚点后，我想将导航返回到原始位置。 我在下面的js编写了第一个动画，使其正常工作，但是当我单击第二个锚点以将导航返回到原始位置时，它无法工作。

 $(document).ready(function(){ $(".menu-button").click(function(){ $(".nav-bar").animate({left: '50px'}); }); $(".close-nav").click(function(){ $(".nav-bar").animate({left:'-50px;'}); }); }); 

 .menu-button { display: block; width: 50px; height: 50px; background: red; float: left; } .nav-bar { position: relative; background: rgba(0,0,0,0.5); left: -600px; } .nav-bar ul { list-style-type: none; } .nav-bar ul li { float: left; margin-left: 20px; } .nav-bar ul li a { } a.close-nav { position: relative; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="menu-button open-nav"></a> <nav class="nav-bar"> <ul> <li><a href="">About Us</a></li> <li><a href="">Our Portfolio</a></li> <li><a href="">Client Testimonial</a></li> <li><a href="">Contact</a></li> <li><a href="" class="close-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li> </ul> </nav> 

Answer 1

您必须在事件对象上使用preventDefault()才能取消链接单击。 否则，单击关闭箭头只会再次导航到同一页面。

另外，您必须将动画重新设置为-600px （css的初始位置），而不仅仅是-50px 。

 $(document).ready(function(){ $(".menu-button").click(function(ev){ ev.preventDefault(); $(".nav-bar").animate({left: '50px'}); }); $(".close-nav").click(function(ev){ ev.preventDefault(); $(".nav-bar").animate({left:'-600px'}); }); }); 

 .menu-button { display: block; width: 50px; height: 50px; background: red; float: left; } .nav-bar { position: relative; background: rgba(0,0,0,0.5); left: -600px; } .nav-bar ul { list-style-type: none; } .nav-bar ul li { float: left; margin-left: 20px; } .nav-bar ul li a { } a.close-nav { position: relative; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="menu-button open-nav"></a> <nav class="nav-bar"> <ul> <li><a href="">About Us</a></li> <li><a href="">Our Portfolio</a></li> <li><a href="">Client Testimonial</a></li> <li><a href="">Contact</a></li> <li><a href="" class="close-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li> </ul> </nav> 

Answer 2

首先，你应该preventDefault上a点击，然后你可以动画左侧-100%

 $(".menu-button").click(function() { $(".nav-bar").animate({ left: '50px' }); }); $(".close-nav").click(function(e) { e.preventDefault() $(".nav-bar").animate({ left: '-100%' }); }); 

 .menu-button { display: block; width: 50px; height: 50px; background: red; float: left; } .nav-bar { position: relative; background: rgba(0, 0, 0, 0.5); left: -600px; } .nav-bar ul { list-style-type: none; } .nav-bar ul li { float: left; margin-left: 20px; } a.close-nav { position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <a href="#" class="menu-button open-nav"></a> <nav class="nav-bar"> <ul> <li><a href="">About Us</a></li> <li><a href="">Our Portfolio</a></li> <li><a href="">Client Testimonial</a></li> <li><a href="">Contact</a></li> <li><a href="" class="close-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li> </ul> </nav>