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

Question

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

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

有没有人知道如何解决其中的一个或两个问题，或有一个更好的解决办法，以达到同样的效果？

使用当前代码：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的解决方案可以工作，但是删除attribut类并不是一种合适的方法，因为您可能有转换类以外的其他类，而且您可能不想删除这些其他类。

@vvtx和@Parvez的解决方案不能解决第二个问题。

我建议你创建一个函数：

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

并在所有click回调中添加转换类之前调用此函数。