Question

当我使用JQuery的id="markdown-editor"函数单击按钮时，我试图让Animate的div滑过。 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

你忘记了＃menu-button

的引用

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

修改

确保链接到头脑中的jQuery库。

另外，尝试在你的CSS中给＃markdown-editor一个左值。此外，你需要给它一个位置。如果其中的元素具有位置无关紧要，则实际元素需要一个位置才能生成动画。必须是固定的，相对的或绝对的。

#markdown-editor { 
    position: relative; // or fixed or absolute
    left: 2px;
}

Answer 2

你需要在Javascript部分的第一个＃menu-button周围引用。

固定位置Div不用JQuery动画

2 个答案: