Javascript 将整个页面向左然后向右移动

我在找这种类型的。向左移动页面，然后向右移动页面。有人能告诉我怎么做吗？或者有没有类似的javascript示例

创建两个

s，将它们相邻放置，使它们占据整个窗口，并根据需要进行更改

HTML:

JS（jQuery）：

---

这里有一个.

如果你想让它在所有设备上都平滑地动画，你应该使用css转换和变换。隐藏和显示就像切换类一样简单

.包装纸{
宽度：100%；
溢出：隐藏；
}
.菜单{
高度：100vh；
宽度：100px；
背景：#ABC；
颜色：白色；
位置：绝对位置；
左：0；
转换：转换0.3s；
转换：translateX（-100px）；
}
.内容{
转换：转换0.3s；
}
.活动.菜单{
变换：translateX（0）；
}
.活动.内容{
转换：translateX（100px）；
}
切换
我的菜单
我的内容
document.querySelector（'.toggle'）.addEventListener（'click'，函数（事件）{
event.preventDefault（）；
document.querySelector（'.wrapper'）.classList.toggle（“active”）；
});

注意！由IE10支持。IE 9将不支持动画，如果需要转换和变换属性，您可能应该添加所需的-ms-、-webkit-、-moz-，等前缀以支持旧浏览器

另外，我建议不要使用此方法设置正文或html动画，并将页面内容放入包装器中（在示例中为in.content）。直接移动正文和html可能会导致不愉快的惊喜。

使用方法将页面从左向右移动

// Set the effect type
        var effect = 'slide';

        // Set the options for the effect type chosen
        var options = { direction: 'right' };

        // Set the duration (default: 400 milliseconds)
        var duration = 700;

        $('#Id').toggle(effect, options, duration);

---

通过此

设置

html，body上的
margin
属性

设置margin属性是什么意思。如果单击面板，您将看到整个页面向右移动。我移动以移动整个页面。您是否可以更详细地说明它的工作方式（是否单击切换按钮）、您使用的浏览器（关于所需的前缀和classList.toggle命令）？

body {
    margin: 0;
}

.left {
    background-color: green;
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    transition: width 1s;
    width: 0;
}

.left.active {
    width: 200px;
}

.right {
    background-color: red;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: left 1s;
}

.right.active {
    left: 200px;
}

$('.right').on('click', function() {
    $('.left').toggleClass('active');
    $('.right').toggleClass('active');
});

<style media="screen">
  .wrapper {
    width: 100%;
    overflow: hidden;
  }

  .menu {
    height: 100vh;
    width: 100px;
    background: #ABC;
    color: white;
    position: absolute;
    left:0;
    transition: transform 0.3s;
    transform: translateX(-100px);
  }
  .content {
    transition: transform 0.3s;
  }

  .active .menu {
    transform: translateX(0);
  }

  .active .content {
    transform: translateX(100px);
  }
</style>

<button class="toggle">Toggle</button>
<div class="wrapper">
    <div class="menu">
        My menu
    </div>
    <div class="content">
        My content
    </div>
</div>
<script type="text/javascript">
  document.querySelector('.toggle').addEventListener('click', function(event) {
  event.preventDefault();
    document.querySelector('.wrapper').classList.toggle("active");
  });
</script>

// Set the effect type
        var effect = 'slide';

        // Set the options for the effect type chosen
        var options = { direction: 'right' };

        // Set the duration (default: 400 milliseconds)
        var duration = 700;

        $('#Id').toggle(effect, options, duration);