Div с фиксированным положением не анимируется с помощью JQuery

Я пытаюсь получить div с id="markdown-editor" чтобы перескакивать при нажатии кнопки с помощью функции JQuery Animate. markdown-editor содержит два div, которые имеют position: fixed. У div с id=header нет никакого другого позиционирования 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="/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");
});