Fixed-Position Div Not Animating With JQuery

Question

I am trying to get the div with id="markdown-editor" to slide over when a button is clicked using JQuery's Animate function. markdown-editor contains two divs that have position: fixed . The div with id=header doesn't have any other positioning css ( top , bottom , left , etc.), but the other div, where id=footer , has bottom: 0px . When I animate the #markdown-editor div, everything inside #markdown-editor animates correctly except #footer . I know it has something to do with using positioning css, but I'm not sure what to do about it. Below is the pertinent code:

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

You forgot quotes around #menu-button

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

EDIT

Make sure you're linking to the jQuery library in your head.

Also, try giving #markdown-editor a left value in your css. Also, you need to give it a position. It doesn't matter if the elements inside it have position, the actual element needs a position in order to animate. Has to be fixed, relative, or absolute.

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

Answer 2

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