ページの中央下に固定されている小さな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>
私のコードが間違っているところを助けてください。ありがとう