Question

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

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

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

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

我在JSFiddle上有我的代码here。

感谢您的帮助：）

Answer 1

这是因为您正在设置容器allContainer的动画，该容器还包含您的内容，因此一切都向左移动。只需为sidebar中的#sidebar { width: 40%; height: 100%; float: left; background: blue; margin-left: -40%; position: absolute; } button { float: right; }设置动画。

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

CSS：

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

JS：

allContainer

如果我误解了你并且你不希望侧边栏覆盖任何东西，这是一个小提示，当侧边栏扩展时你的内容会缩小，所以没有任何内容被覆盖。无论哪种方式，正如我所看到的那样，主要问题是动画$(document).ready(function() { $("#MyTable").on('sorted', function(){ var lastRow = $("#MyTable").find("tbody tr:last"); // Removing dropup class from the row which owned it $("#MyTable").find("tbody tr.dropup").removeClass("dropup"); // Adding dropup class to the current last row lastRow.addClass("dropup"); }); });而不是其中的小块。

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

jQuery动画改变窗口大小

1 个答案: