Pull out a div from the bottom

问题

I have this code at jsfiddle

Quite simply, I want to pull it out from the bottom, on a fixed size page (1920x1080), I have this sample working to pull from the right edge, but not sure how to move it to the bottom.

Many thanks if you can help

HTML

<div id="slideout">
    <div id="slidecontent">
        Yar, there be dragonns herre!
    </div>
    <div id="clickme">
    </div>
</div>

Script

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
    });
});

Style:

body {
    overflow-x: hidden;
}
#slideout {
    background: #666;
    position: absolute;
    width: 280px;
    height: 80px;
    top: 45%;
    right:-280px;
    padding-left: 20px
}

#clickme {
    position: absolute;
    top: 0; left: 0;
    height: 20px;
    width: 20px;
    background: #ff0000;
}

#slidecontent {
    float:left;
}

回答1:

Look at the following jsFiddle..

Basically I copied and pasted your code and manipulated using bottom positioning. that way you will be able to see the differences between the two.. both in CSS and JS. it is essentially the same logic as the code you posted.

Note that the body now has overflow:hidden; instead of overflow-x:hidden;

回答2:

To move it to the bottom, simply make a small change to your CSS.

#slideout {
    background: #666;
    position: absolute;
    width: 280px;
    height: 80px;
    bottom: 50px;
    right:-280px;
    padding-left: 20px
}

来源：https://stackoverflow.com/questions/17372346/pull-out-a-div-from-the-bottom