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

Question

我有一个固定在页面底部中心的小 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>

请帮助我的代码哪里错了。谢谢

Answer 1

使用margin-bottom您的 div 位于页面底部。看看这个小提琴：

http://jsfiddle.net/SpMns/