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">
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="6894224149"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script><h2>fadeOut() example</h2>
	
	<div class="fadeOutbox">
		Click me - fadeOut()
	</div>
	
	<div class="fadeOutbox">
		Click me - fadeOut()
	</div>
</div>

<div class="clear">
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="8821506761"
     data-ad-format="auto"
     data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><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, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
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
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 »
LUKCY
Guest
LUKCY

HIde

Movilla
Guest
Movilla

Thanks

ksirishna
Guest
ksirishna

Hi Nobby
try this out..

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

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. :)

Kyle
Guest
Kyle

Make your div or element hidden in your css.
display:none;
or
visibility:hidden;
then fadeIn.

LUKCY
Guest
LUKCY

you can try like this :

I AM IN HIDE

Amit
Guest
Amit
amit
Guest
amit

you should apply this to div which you want display hidden when page load.

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

trackback
jQuery Tutorials

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