jQuery fadeIn（），fadeOut（）和fadeTo（）示例

最新推荐文章于 2021-10-12 16:11:02 发布

cyan20115

最新推荐文章于 2021-10-12 16:11:02 发布

阅读量749

点赞数 1

文章标签： javascript ViewUI

jQuery带有三种方便的方法来轻松创建褪色效果。

fadeIn（）–显示匹配的元素并具有淡入效果。
fadeOut（）–隐藏具有淡入/透明效果的匹配元素。
fadeTo（）–使匹配的元素淡入某些不透明度。

以上三种方法都是将支持持续时间作为参数：慢速，快速或精确毫秒。如果省略此参数，则默认为400毫秒。

自己尝试

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	.fadeOutbox, .fadeInbox, .fadeTobox{
		float:left;
		padding:8px;
		margin:16px;
		border:1px solid red;
		width:200px;
		height:50px;
		background-color:#000000;
		color:white;
	}
	.clear{
		clear:both;
	}
</style>

</head>

<body>

<h1>jQuery fadeIn(), fadeOut() and fadeTo() example</h1>


<div class="clear">
	<h2>fadeOut() example</h2>
	
	<div class="fadeOutbox">
		Click me - fadeOut()
	</div>
	
	<div class="fadeOutbox">
		Click me - fadeOut()
	</div>
</div>

<div class="clear">
	<h2>fadeIn() example</h2>
	
	<div class="fadeInbox">
		Click me - fadeIn()
	</div>
	
	<div class="fadeInbox">
		Click me - fadeIn()
	</div>
</div>

<div class="clear">
	<h2>fadeTo() example</h2>
	
	<div class="fadeTobox">
		Click me - fadeTo()
	</div>
	
	<div class="fadeTobox">
		Click me - fadeTo()
	</div>
</div>


<div class="clear">
	<button id=reset>Reset</button>
</div>

<script type="text/javascript">

$(".fadeOutbox").click(function () {
   $(this).fadeOut('slow');
});

$(".fadeInbox").click(function () {
   $(this).hide().fadeIn(2000);
});

$(".fadeTobox").click(function () {
   $(this).fadeTo('fast',0.2);
});

$("#reset").click(function(){
	location.reload();
});
</script>

</body>
</html>

试试演示