javascript - 如何使用 jquery(或 javascript)在单击按钮时移动 div

Question

我正在尝试创建一个导航系统，在单击按钮时将一个全屏 div“推”出 View ，将一个全屏 div“推”入 View 。我的代码有两个问题:

1. 它只工作一次。单击按钮后，除非重新加载页面，否则它不会再次执行该操作。
2. 第二个问题是，如果选择:第 2 页 -> 主页 -> 第 1 页。然后第 1 页作为叠加层进入，而不是向左“推”主页。

有没有人知道如何解决一个或两个问题，或者有更好的解决方案来达到同样的效果？

Codepen 当前代码:http://codepen.io/a_ij/pen/XpZmvz

代码:

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

你需要删除类然后像这样添加它..

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