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

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

它只工作一次。单击按钮后，除非重新加载页面，否则不会再次执行该操作

第二个问题是，如果选择：第2页第一->主页->第1页。然后第1页以覆盖的形式进入，而不是向左“推”回家

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

使用当前代码打开代码：

代码：

/*CSS*/
html，正文{
保证金：0；
填充：0；
溢出：隐藏；
}
#家{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
最小高度：100vh；
保证金：0；
z指数：9；
显示：块；
背景色：#1abc9c；
}
#第1页{
位置：绝对位置；
排名：0；
左：100vw；
宽度：100%；
最小高度：100vh；
保证金：0；
显示：块；
z指数：99；
背景色：#2ecc71；
}
#第2页{
位置：绝对位置；
顶部：100vh；
左：0；
宽度：100%；
最小高度：100%；
保证金：0；
显示：块；
背景色：#3498db；
}
.左移{
转换：转换（-100vw，0）；
-moz变换：平移（-100vw，0）；
-ms变换：平移（-100vw，0）；
-webkit转换：转换（-100vw，0）；
-o变换：平移（-100vw，0）；
转换：转换700ms；
-webkit过渡计时功能：易用；
过渡计时功能：立方贝塞尔（.86、.01、.77、.78）；
-webkit转换延迟：200ms；
过渡延迟：200ms；
}
.移动中心{
变换：平移（0,0）；
-moz变换：平移（0,0）；
-ms变换：平移（0,0）；
-webkit转换：转换（0,0）；
-o变换：平移（0,0）；
转换：转换700ms；
-webkit过渡计时功能：易用；
过渡计时功能：立方贝塞尔（.86、.01、.77、.78）；
-webkit转换延迟：200ms；
过渡延迟：200ms；
}
.上移{
转换：转换（0，-100vh）；
-moz变换：平移（0，-100vh）；
-ms变换：平移（0，-100vh）；
-webkit转换：转换（0，-100vh）；
-o变换：平移（0，-100vh）；
转换：转换700ms；
-webkit过渡计时功能：易用；
过渡计时功能：立方贝塞尔（.86、.01、.77、.78）；
-webkit转换延迟：200ms；
过渡延迟：200ms；
}
.向下移动{
变换：平移（0,0）；
-moz变换：平移（0,0）；
-ms变换：平移（0,0）；
-webkit转换：转换（0,0）；
-o变换：平移（0,0）；
转换：转换700ms；
-webkit过渡计时功能：易用；
过渡计时功能：立方贝塞尔（.86、.01、.77、.78）；
-webkit转换延迟：200ms；
过渡延迟：200ms；
}

第1页
第2页
这里有一页主页
这是第二页主页
$（文档）.ready（函数（）{
$（'#gop1'）。单击（函数（）{
$（'home，'page1'）.addClass（'moveleft'）；
});
});
$（文档）.ready（函数（）{
$（'#goh1'）。单击（函数（）{
$（'home，'page1'）.addClass（'movecenter'）；
});
});
$（文档）.ready（函数（）{
$（'#gop2'）。单击（函数（）{
$（'home，'page2'）.addClass（'moveup'）；
});
});
$（文档）.ready（函数（）{
$（'#goh2'）。单击（函数（）{
$（'home，'page2'）.addClass（'movedown'）；
});
});

您需要删除类，然后像这样添加它

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

});

只要复制和粘贴这个，它就会工作

---

将脚本更改为以下方式：

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

$（文档）.ready（函数（）{
$（'#gop1'）。单击（函数（）{
$（'home，'page1'）.removeClass（'movecenter'）；
$（'home，'page1'）.addClass（'moveleft'）；
});
$（'#goh1'）。单击（函数（）{
$（'home，'page1'）.removeClass（'moveleft'）；
$（'home，'page1'）.addClass（'movecenter'）；
});
$（'#gop2'）。单击（函数（）{
$（'home，'page2'）.removeClass（'movedown'）；
$（'home，'page2'）.addClass（'moveup'）；
});
$（'#goh2'）。单击（函数（）{
$（'home，'page2'）。removeClass（'moveup'）；
$（'home，'page2'）.addClass（'movedown'）；
});
});

为了使它更简单，我删除了多个打开和关闭

script

标记。但这不是问题所在。这只是为了简单。

---

通过添加额外的

removeClass

方法可以解决此问题，如上面的代码所示。

@Minksmnm的解决方案是有效的，但是删除attribute类不是一种正确的方法，因为您可能有转换类以外的其他类，并且可能不想删除这些其他类

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

我建议您创建一个函数：

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

函数RemoveTransitionClass（）{
$（'home，'page1'）.removeClass（'moveleft'）；
$（'home，'page1'）.removeClass（'movecenter'）；
$（'home，'page2'）。removeClass（'moveup'）；
$（'home，'page2'）.removeClass（'movedown'）；
};

---

在所有

回调中添加转换类之前调用此函数。
在添加之前删除该类，然后等待1ms并超时添加它-问题是它不会转换，因为它仍然具有相同的css类，而无需删除类或滑动div即可隐藏（）和显示（）使用jquery的div