jQuery comes with three handy methods to create the fading effect easily.

  1. fadeIn() – Display the matched elements with fade in effect.
  2. fadeOut() – Hide the matched elements with fade out / transparent effect.
  3. fadeTo() – Fading the matched elements to certain opacity.

Above three methods are support duration as parameter : slow, fast, or exact milliseconds. If this parameter is omitted, the default 400 milliseconds is apply.

Try it yourself

<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">
	<h3>fadeOut() example</h3>
 
	<div class="fadeOutbox">
		Click me - fadeOut()
	</div>
 
	<div class="fadeOutbox">
		Click me - fadeOut()
	</div>
</div>
 
<div class="clear">
	<h3>fadeIn() example</h3>
 
	<div class="fadeInbox">
		Click me - fadeIn()
	</div>
 
	<div class="fadeInbox">
		Click me - fadeIn()
	</div>
</div>
 
<div class="clear">
	<h3>fadeTo() example</h3>
 
	<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>
Try Demo
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at jQuery Tutorials