使用jQuery从页面底部中心向上/向下滑动DIV [英] Slide Up/Down DIV from bottom center of the page using jquery

问题描述

我是一个小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

推荐答案

将margin-bottom与div一起使用，因为div位于页面底部.看看这个小提琴:

Work with margin-bottom as your div is positioned at the bottom of the page. Have a look at this fiddle:

http://jsfiddle.net/SpMns/

这篇关于使用jQuery从页面底部中心向上/向下滑动DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！