fadein标题,而按钮在jquery中保持不变

时间:2016-08-13 06:37:07

标签: javascript jquery css fadein removeclass

我对jquery非常基本所以我正在做一个网页,当页面加载时,我希望我的标题在顶部的jumbotron fadeIn,而下面的按钮保持不变。 有人可以帮我这个。因为当页面开始时按钮保持在顶部并回到它的位置,我的意思是在底部。页面完全加载和标题淡出...

$(document).ready(function () {
    $('.main-heading').fadeIn(1000).removeClass('main-heading-hidden');
});
.jumbotron {
	background-image: url("googlenownewyork.png");
	background-position: center center ;
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
	height: 600px;
	margin:0;
	padding: 0;
}

.main-heading{
	color: white;
	text-align: center;
	padding-top:140px;
}

.main-heading-hidden{
display: none;
} 

.header-button{
	text-align: center;
	padding-top: 30px;
}

.header-button .btn:hover{
	color: white;
	background-color: black;
}
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" ></script>
<script src="metcorp.js" type="text/javascript"></script>


<div class="jumbotron">
		<div class="container first-div">
			<div class="row main-heading main-heading-hidden">
			
				<h1>Mount Edge Technologies</h1>
				<h3></h3>
			</div>
			<div class="row header-button btn-padding">
				<button type="button" class="btn">About Us</button>
				<button type="button" class="btn">Get A Quote</button>
			</div>
		</div>
	</div>

3 个答案:

答案 0 :(得分:1)

string str_simple = "HELLO WORLD"; //string to NSString NSString *stringinObjC = [NSString stringWithCString:str_simple.c_str() encoding:[NSString defaultCStringEncoding]]; NSLog(stringinObjC); 从页面布局中删除标题。

不是显示,而是尝试不透明度。

你也可以很容易地用css3动画做到这一点,完全避免使用jquery的fadeIn功能。

答案 1 :(得分:0)

您可以尝试使用CSS @keyframes来执行fadein 并且在100%时你可以使不透明度为0.

我希望有效

答案 2 :(得分:0)

直播Demo

将此脚本链接添加到您的代码中。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" type="text/javascript"></script>

并且不要在准备好的函数中编写此代码: 直接在脚本中写

$('.main-heading').fadeIn(2000).removeClass('main-heading-hidden');