jQuery动画更改窗口大小

jQuery animation changing window size

本文关键字：窗口大小 动画 jQuery      更新时间：2023-09-26

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

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

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

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

我在JSFiddle上有我的代码。

感谢您的帮助：）

这是因为您正在为容器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;
});

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

Fiddle：http://jsfiddle.net/bc4kau0w/4/

相关文章：