jQuery animate return back to original position when click another anchor

Question

I want to return nav back to original position after clicking anther anchor. I wrote below js first animate working properly but when I click second anchor to move nav returns to original position not working..

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






  
    About Us
    Our Portfolio
    Client Testimonial
    Contact

user_995800 · Answer

You have to use preventDefault() on the event object in order to cancel the link click. Otherwise, clicking on the closing arrow will just navigate to the same page again.

Also, you have to animate back to -600px (the initial position from your css), not just -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;
}






  
    About Us
    Our Portfolio
    Client Testimonial
    Contact

user_4620771 · Answer

First you should preventDefault on a click and then you can animate left to -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;
}





  
    About Us
    Our Portfolio
    Client Testimonial
    Contact

jQuery animate return back to original position when click another anchor

2 Answers