如何使用jQuery（或JavaScript）在按钮单击上移动div

Question

我正在尝试创建一个导航系统，当单击一个按钮时，它会将一个全屏div从视图中“推送”到另一个全屏div。 我的代码有两个问题：

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

});

只需复制并粘贴它，它将起作用。

Answer 2

将脚本更改为这种方式：

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

为了更简单，我删除了多个打开和关闭script标签。 但这不是问题。 它只是为了简单起见。 如上代码所示，通过添加额外的removeClass方法可以解决该问题。

Answer 3

@Minksmnm的解决方案有效，但是删除属性类不是正确的方法，因为您可能拥有过渡类之外的其他类，并且您可能不想删除这些其他类。

@vvtx和@Parvez的解决方案不能解决第二点。

我建议您创建一个函数：

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

并在所有click回调中添加过渡类之前调用​​此函数。