我正在创建网站的首页,并且要在加载页面时删除标题,这是我尝试的



$(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>

10-05 20:52
查看更多