單擊另一個錨點時，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>