我正在创建网站的首页,并且要在加载页面时删除标题,这是我尝试的
$(document).ready(function() {
$("#heading, #tag_line").hide();
$("#heading").slideDown(1000);
});
#header {
height: 70px;
border-bottom: 4px solid lightgrey;
}
#header_content {
margin-top: 10px;
margin-left: 80px;
}
.brandmark {
margin-top: -20px;
}
.link_to a {
color: #0050A0 !important;
}
#featured_div {
display: none;
}
#home_div {
background-color: #0050A0;
padding-top: 100px;
color: white;
height: 200px;
}
#home_div_content {
text-align: center
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="home_div">
<div class="container" id="home_div_content">
<h1 id="heading">Find your product!</h1>
<h4 id="tag_line">Search what you are looking for.</h4>
<form>
<input type="text" name="" class="form-control" />
</form>
</div>
</div>
它不是从天上掉下来,而是在某种程度上褪色。任何人都可以帮助实现它吗?
最佳答案
您可能想使用animate()
来显示动画中的div,而不是使用slideDown()
来使div显得“打开”。
$(document).ready(function() {
$('#home_div_content').animate({
top: '0px'
}, 1000 );
});
#home_div {
background-color: #0050A0;
padding-top: 10px;
color: white;
height: 200px;
}
#home_div_content {
text-align: center
}
#home_div_content {
top: -300px;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="home_div">
<div class="container" id="home_div_content">
<h1 id="heading">Find your product!</h1>
<h4 id="tag_line">Search what you are looking for.</h4>
<form>
<input type="text" name="" class="form-control" />
</form>
</div>
</div>