jQuery动画更改窗口大小

Question

所以我正在尝试构建一个从屏幕左侧扫入的侧栏。我有菜单元素向左浮动，宽度= 40％，余量= -40％。

当我滑动或按侧栏出现的按钮时，页面调整大小并缩小以容纳边栏。如果我停止使用宽度为100％的容器，我可以阻止这种情况发生，但是，我希望内容成为页面的整个宽度。

这是怎么了，我移动边栏：

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

我有我的代码here上的jsfiddle。

谢谢你的任何帮助:)

Answer 1

这是因为您设置动画的容器allContainer所以一切都是向左移动还握着你的内容。就在动画sidebar

小提琴：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而不是其中的小部分。

小提琴：http://jsfiddle.net/bc4kau0w/4/