Slide Up/Down DIV from bottom center of the page using jquery
<p>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.</p>

<p>this way i tried but my sample code not working properly</p>

<pre><code> #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;
}

&lt;script type="text/javascript"&gt;
    $(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;
        });
    });
&lt;/script&gt;

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

<p>please help where is my code wrong. thanks</p>
