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

  • Pingback: pay per day loan plans()

  • Pingback: water ionizer plans()

  • Pingback: stop parking()

  • Pingback: water ionizer()

  • Pingback: mobile porn movies()

  • Pingback: parking()

  • Pingback: DIRECTV()

  • Pingback: tv packages()

  • Pingback: enagic kangen water()

  • Pingback: alkaline water()

  • Pingback: alkaline water()

  • Pingback: alkaline water()

  • Pingback: streaming movies()

  • Pingback: watch free movies online()

  • Pingback: streaming movies()

  • Pingback: Blue Coaster33()

  • http://simplybedesign.com LUKCY

    HIde

  • Movilla

    Thanks

  • ksirishna

    Hi Nobby
    try this out..

  • 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

    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

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

      • http://simplybedesign.com LUKCY

        you can try like this :

        I AM IN HIDE

  • http://www.itgenesys.com 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

  • Pingback: jQuery Tutorials()