使用jquery从页面底部中间向上/向下滑动DIV

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

这样我试过了，但是我的示例代码没有正常工作

 #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>

#BusyBox
{
背景：-moz线性渐变（中间顶部，#F1F2F2 0%，#F1F2F2 100%）重复滚动0 0透明；
边框左上半径：5px；
边框右上角半径：5px；
底部：0；
字号：0.8em；
字体风格：普通；
字体大小：正常；
左：50%；
左边距：-45px；
填充顶部：20px；
位置：固定；
文本对齐：居中；
宽度：90px；
高度：50px；
利润上限：-50px；
背景重复：无重复；
背景位置：中心；
}
$（文档）.ready（函数（）{
var标志=1；
$（“#进程”）。单击（函数（）{
如果（标志==1）{
$（'#BusyBox'）.stop（true）.animate（{'marginTop'：'50px'，'opacity'：'0'，{queue:false，duration:300}）；
flag=0；
}
否则{
$（'#BusyBox'）.stop（true）.animate（{'marginTop'：'-50px'，'opacity'：'1'，{queue:false，duration:300}）；
flag=1；
}
返回false；
});
});
正在加载等待。。。

---

请帮忙我的代码哪里错了。感谢使用

页边距底部

，因为您的div位于页面底部。看看这把小提琴：

---

谢谢你的帮助…我用你的代码创建了自定义函数…我的问题中包含了body。谢谢，我需要一个类似的东西。我还需要div在几秒钟后消失，除非div当前处于悬停状态。如果有帮助，我想分享小提琴：