How to move divs on button clicks with jquery (or javascript)

Question

I am trying to create a navigation system that "pushes" one fullscreen div out of view and one into view when clicking a button. My code has two problems:

1. It only works once. After clicking a button it wont do the action again unless the page is reloaded.
2. The second problem is that if one selects: page 2 first -> home -> page 1. Then page 1 goes in as an overlay instead of "pushing" home to the left.

Does any one know how to solve one or both of the problems, or have a better solution to achive the same effect?

Codepen with the current code: http://codepen.io/a_ij/pen/XpZmvz

Code:

 /* CSS */ html, body { margin: 0; padding: 0; overflow: hidden; } #home { position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; margin: 0; z-index: 9; display: block; background-color: #1abc9c; } #page1 { position: absolute; top: 0; left: 100vw; width: 100%; min-height: 100vh; margin: 0; display: block; z-index: 99; background-color: #2ecc71; } #page2 { position: absolute; top: 100vh; left: 0; width: 100%; min-height: 100%; margin: 0; display: block; background-color: #3498db; } .moveleft { transform:translate(-100vw, 0); -moz-transform:translate(-100vw, 0); -ms-transform:translate(-100vw, 0); -webkit-transform:translate(-100vw, 0); -o-transform:translate(-100vw, 0); transition: transform 700ms; -webkit-transition-timing-function: ease-in; transition-timing-function: cubic-bezier(.86,.01,.77,.78); -webkit-transition-delay: 200ms; transition-delay: 200ms; } .movecenter { transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); -o-transform: translate(0, 0); transition: transform 700ms; -webkit-transition-timing-function: ease-in; transition-timing-function: cubic-bezier(.86,.01,.77,.78); -webkit-transition-delay: 200ms; transition-delay: 200ms; } .moveup { transform: translate(0, -100vh); -moz-transform: translate(0, -100vh); -ms-transform: translate(0, -100vh); -webkit-transform: translate(0, -100vh); -o-transform: translate(0, -100vh); transition: transform 700ms; -webkit-transition-timing-function: ease-in; transition-timing-function: cubic-bezier(.86,.01,.77,.78); -webkit-transition-delay: 200ms; transition-delay: 200ms; } .movedown { transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); -o-transform: translate(0, 0); transition: transform 700ms; -webkit-transition-timing-function: ease-in; transition-timing-function: cubic-bezier(.86,.01,.77,.78); -webkit-transition-delay: 200ms; transition-delay: 200ms; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- HTML --> <div id="home"> <button id="gop1">Page1</button> <button id="gop2">Page2</button> </div> <div id="page1">Here is one page <button id="goh1">Home</button></div> <div id="page2">Here is the second page<button id="goh2">Home</button></div> <!-- Scripts --> <script> $(document).ready(function(){ $('#gop1').click(function() { $('#home, #page1').addClass('moveleft'); }); }); </script> <script> $(document).ready(function(){ $('#goh1').click(function() { $('#home, #page1').addClass('movecenter'); }); }); </script> <script> $(document).ready(function(){ $('#gop2').click(function() { $('#home, #page2').addClass('moveup'); }); }); </script> <script> $(document).ready(function(){ $('#goh2').click(function() { $('#home, #page2').addClass('movedown'); }); }); </script> 

Answer 1

You need to remove class then add it like this..

$(document).ready(function(){

  $('#gop1').click(function() {
      $('#home, #page1').removeAttr('class');
  $('#home, #page1').addClass('moveleft');
  });


  $('#goh1').click(function() {
      $('#home, #page1').removeAttr('class');
  $('#home, #page1').addClass('movecenter');
  });



  $('#gop2').click(function() {
      $('#home, #page2').removeAttr('class');
  $('#home, #page2').addClass('moveup');
  });



$('#goh2').click(function() {
    $('#home, #page2').removeAttr('class');
  $('#home, #page2').addClass('movedown');
  });

});

Just Copy and Paste this and it will work.

Answer 2

Change your script to this way:

<script>
$(document).ready(function(){
      $('#gop1').click(function() {
       $('#home, #page1').removeClass('movecenter');
            $('#home, #page1').addClass('moveleft');
      });
       $('#goh1').click(function() {
       $('#home, #page1').removeClass('moveleft');
            $('#home, #page1').addClass('movecenter');
      });
       $('#gop2').click(function() {
       $('#home, #page2').removeClass('movedown');
            $('#home, #page2').addClass('moveup');
      });
      $('#goh2').click(function() {
       $('#home, #page2').removeClass('moveup');
            $('#home, #page2').addClass('movedown');
      });
  });
</script>

To make it more simple I removed multiple open and close script tags. But that is not the problem. Its just for the simplicity. The problem is resolved by adding extra removeClass method as shown in code above.

Answer 3

The solution of @Minksmnm works, but removing the attribut class is not a proper way because you may have other classes than the transition classes and you may not want to remove these other classes.

The solutions of @vvtx and @Parvez don't solve the second point.

I advise you to create a function :

<script>
    function removeTransitionClasses () {
        $('#home, #page1').removeClass('moveleft');
        $('#home, #page1').removeClass('movecenter');
        $('#home, #page2').removeClass('moveup');
        $('#home, #page2').removeClass('movedown');
    };
</script>

and call this function before adding transition classes in all your click callbacks.