javascript - 当单击另一个 anchor 时，jQuery 动画返回到原始位置

Question

我想在单击另一个 anchor 后将导航返回到原始位置。我在下面写了 js 第一个动画正常工作但是当我单击第二个 anchor 将导航返回到原始位置时不起作用..

$(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>