使用jQuery从页面底部中心向上/向下滑动DIV

我是一个小div，它固定在页面的底部中心.现在我希望最初的div将不可见.当用户单击按钮时，div将从浏览器的底部向上滑动；当用户再次单击按钮时，div将向下滑动到底部.

i ha small div which is fixed at bottom center of page. now i want that initially div will not be visible. when user click on button then div will slide up from bottom edge of browser and when user click again on button then div will slide down to bottom.

我尝试过这种方式，但是我的示例代码无法正常工作

this way i tried but my sample code not working properly

 #BusyBox
{
background: -moz-linear-gradient(center top , #F1F2F2 0%, #F1F2F2 100%) repeat scroll 0 0 transparent;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
bottom: 0;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
left: 50%;
margin-left: -45px;
padding-top: 20px;
position: fixed;
text-align: center;
width: 90px;
height: 50px;
margin-top: -50px;
background-repeat:no-repeat;
background-position: center center;
}

<script type="text/javascript">
    $(document).ready(function () {
        var flag = 1;

        $("#Process").click(function () {
            if (flag == 1) {
                $('#BusyBox').stop(true).animate({ 'marginTop': '50px', 'opacity': '0' }, { queue: false, duration: 300 });
                flag = 0;
            }
            else {
                $('#BusyBox').stop(true).animate({ 'marginTop': '-50px', 'opacity': '1' }, { queue: false, duration: 300 });
                flag = 1;
            }

            return false;
        });
    });
</script>

<asp:Button ID="Process" runat="server" Text="Click" />
<div id="BusyBox" >
    <img src="images/loader.gif"  alt="Loading..."/>
    <div>
    <em>Loading Wait...</em>
    </div>
</div>

请帮助我的代码在哪里错误.谢谢

please help where is my code wrong. thanks