-2
我想讓一個div從關閉屏幕到關於屏幕......該div應該從上到下。我已經嘗試了一些東西,但遺憾的是沒有任何反應:(。我是對的,在div必須position: absolute;
?動畫功能不工作DIV
請幫助。
HTML + JQUERY
<div id="nav">
<a href="#"><span>1</a>
<a href="#"><span>2</a>
<a href="#"><span>3</a>
<a href="#"><span>4</a>
<a href="#"><span>5</a>
</div>
<div id="hidden">
<h1>Text</h1>
<p>Text</p>
</div>
<script>
var main = function() {
$('#nav a:nth-child(1)').click(function() {
$('#hidden').animate({
top: +=500px
}, 1000);
});
};
$(document).ready(main);
</script>
CSS
body {
background-image: url("http://static.tumblr.com/97f4b171db68d6ef1836c8fcb9a1c1a3/oi8jcug/xIcn5vql3/tumblr_static_aajc47nn2ds8c0k004gskoo0c.jpg");
background-repeat: no-repeat;
background-size: cover;
padding: 0px;
margin: 0px;
}
a {
outline: none;
}
#nav {
height: 50px;
line-height: 50px;
background-color: #1C1C1C;
font-size: 0px;
text-decoration: none;
width: 100%;
text-align: center;
font-family: sans-serif;
margin-bottom: none;
}
#nav span {
display: inline-block;
font-size: 25px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-right: 1px solid white;
height: 50px;
}
#nav span:first-child {
border-left: 1px solid white;
}
#nav span:hover {
border-bottom: 2px solid white;
}
#nav a {
color: white;
text-decoration: none;
margin: 0px;
padding: 0px;
}
#hidden {
width: 100%;
height: 200px;
padding-left: 30px;
background-color: #1C1C1C;
color: red;
font-size: 10px;
top: -250px;
position: absolute;
}
謝謝, HydraCles
標題應簡要描述的問題,並沒有包含任何很怪的笑容。問題的主體應包含控制檯中的任何錯誤消息 –
@ A.Wolff對不起,改變了它,下次我會收到一條ERROR消息。謝謝。 – HydraCles