单击另一个锚点时，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。

＆＃13;

＆＃13;

$(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'});
    });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，您应preventDefault点击a，然后您可以向左移动设为-100%

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;