Javascript jQuery动画更改窗口大小

因此，我试图构建一个侧栏，从屏幕左侧扫入。我让菜单元素向左浮动，宽度=40%，左边距=-40%

当我滑动或按下按钮以显示侧边栏时，页面会自动调整大小并缩小以适应侧边栏。如果我阻止容器的宽度为100%，我可以阻止这种情况发生，但是，我希望内容是页面的全宽

这就是我移动侧边栏的方式：

$("allContainer").animate({left: '40%'});

我在JSFIDLE上有自己的代码

---

感谢您的帮助：）

这是因为您正在设置容器

allContainer

的动画，该容器也保存了您的内容，所以所有内容都向左移动。只需在中设置

侧栏的动画即可

小提琴：

CSS:

JS:

如果我误解了，你不想让边栏覆盖任何东西，这里有一把小提琴，当边栏扩展时，你的内容会缩小，所以什么都没有覆盖。在我看来，无论哪种方式，主要问题都是设置
allContainer
的动画，而不是其中较小的部分

Fiddle:
当侧边栏滑出时，是否希望侧边栏滑到内容顶部？
#sidebar {
  width: 40%;
  height: 100%;
  float: left;
  background: blue;
  margin-left: -40%;
  position: absolute;
}

button {
  float: right;
}

var isMoved = false;
$("button").click(function() {
    if (isMoved) {
        $("#sidebar").animate({
            left: '0px'
        });
    } else {
        $("#sidebar").animate({
            left: '40%'
        });
    }
    isMoved = !isMoved;
});