javascript - jQuery动画改变窗口大小

Question

所以我正在尝试构建一个从屏幕左侧扫入的侧边栏。我让菜单元素向左浮动，宽度 = 40% 且 margin-left = -40%。

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

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

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

我有我的代码 here在 JSFiddle 上。

感谢您的帮助:)

Answer 1

这是因为您正在为容器 allContainer 设置动画，该容器也包含您的内容，因此所有内容都向左移动。只需为 sidebar 设置动画。

fiddle :http://jsfiddle.net/bc4kau0w/3/

CSS:

#sidebar {
  width: 40%;
  height: 100%;
  float: left;
  background: blue;
  margin-left: -40%;
  position: absolute;
}

button {
  float: right;
}

JS:

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

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

fiddle :http://jsfiddle.net/bc4kau0w/4/