jQuery fadeIn(), fadeOut() and fadeTo() example

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">
	<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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments