javascript - 固定位置 Div 不使用 JQuery 进行动画处理

Question

我试图让带有 id="markdown-editor" 的 div 在使用 JQuery 的 Animate 函数单击按钮时滑过。 markdown-editor 包含两个具有 position: fixed 的 div。 id=header 的 div 没有任何其他定位 css(top、bottom、left 等.)，但另一个 div，其中 id=footer，具有 bottom: 0px。当我为 #markdown-editor div 设置动画时，#markdown-editor 中的所有内容都正确设置动画，但 #footer 除外。我知道这与使用定位 css 有关，但我不确定该怎么做。以下是相关代码:

HTML:

<div id="markdown-editor" class="col-xs-12">
    <div id="header" class="row">
        ...
    </div>
    <div class="row">
        ...
    </div>
    <div id="footer" class="row">
        ...
    </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

CSS:

#header {
    position: fixed;
    padding-top: 15px;
    z-index: 9001;
}

#footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    margin: auto;
    z-index: 9001;
    padding: 10px;
}

Javascript:

$("#menu-button").on("click", function(e) {
    $("#markdown-editor").animate({left: "20%"}, 500, "swing");
});

Answer 1

您需要在 Javascript 部分的第一个 #menu-button 周围加上引号。