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>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
9 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
RahulAayvid RekalaAmitLUKCYMovilla Recent comment authors
newest oldest most voted
trackback
jQuery Tutorials

[…] fadeIn(), fadeOut() and fadeTo() example Demostrate about the jQuery fadeIn(), fadeOut() and fadeTo() effects. […]

Noddy
Guest
Noddy

Hi,
I like the demo first of all, I have a small query that if I use fadeTo effect to one image on hover (anchor)and when I remove my hover from the image I want my image to come back to its original condition.

Please suggest what should I do .

Noddy

Leonardo
Guest
Leonardo

Great effect, works great.

I have only 1 doubt, Is there any way to set a div to be hidden at first and then fade in? I tried with the #div:hidden but it didn’t work. Please if somebody knows. 🙂

ksirishna
Guest
ksirishna

Fade in / out / to….

$(document).ready(function(){
$(“.myDiv”).mouseover(function(){
$(this).fadeTo(“slow”,0.25);
});
$(“.myDiv”).mouseout(function(){
$(this).fadeTo(“slow”,1);
});
$(“.myDiv1”).click(function(){
$(this).fadeOut();
});
$(“.in”).click(function(){
$(“.myDiv1”).fadeIn();
$(“.myDiv”).fadeIn();
});

});

Fade To
Click on me and I will hide

Fade In

ksirishna
Guest
ksirishna

Hi Nobby
try this out..

Movilla
Guest
Movilla

Thanks

LUKCY
Guest
LUKCY

HIde

Aayvid Rekala
Guest
Aayvid Rekala

hi i have a doubt regarding Jquery show hide function. i wrote it for 2 radio buttons they are working fine. one radio button id is 0 which should be hided and other one is 1 which should be shown .for showing the id 1 with one click it should get displayed but here when i click for first time it is showing and hiding whereas when i click on the same radiobutton for the second time it is displayed .i didn’t use any double click function and when i inspected the element and when i was examining the script… Read more »

Rahul
Guest
Rahul

hi there, is there any one can help us to make this better, we are making video using rtcrecorder . we are success to make video but the issue is when we start the video using webcam camera start the recording and when we stop the recording the video get long time to show the video that we recorded by webcam so i need to set the loader in between before show the video so please help us. Thanks in advance. this is video tag code where show the video