jquery - 从顶部删除标题

Question

我正在创建我网站的首页，我想在加载页面时删除标题，这是我尝试过的

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

它不是从天而降，而是以某种方式逐渐消失。谁能帮助实现它？

Answer 1

您可能想使用 animate() 来显示动画中的 div，而不是 slideDown()，后者会导致它看起来“打开”。

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