01
Jul
2012

jQuery FadeOut

Posted in: jQuery , No Comments

jquery_logo
jQuery FadeOut method is used to change opacity from visible to hidden. Thus using FadeOut method you can hide any element with fading effect on mouse hover / click.

You can also check below tutorials related to jQuery fade effect:

Step 1:
Define a ID box of width: 200px and height: 200px

#box {
width: 200px;
height: 200px;
background: red;
}

Step 2:
Display this box region.

<div id="box"></div>

Step 3:
Call jQuery Library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 4:
Now we will add jQuery code in head section and tell it to find ID box and fadeout it on mouse hover.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).fadeOut(); // this will fadeout the #box region on mouse hover.
	});
});
</script>

Done!!!
Check below link for live demo.

FadeOut with slow speed

You can set the FadeOut speed to slow. Use below code for slow FadeOut effect.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).fadeOut('slow'); // this will fadeout the #box region with slow speed on mouse hover.
	});
});
</script>

FadeOut with fast speed

You can set the FadeOut speed to fast. Use below code for fast FadeOut effect.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).fadeOut('fast'); // this will fadeout the #box region with fast speed on mouse hover.
	});
});
</script>

FadeOut with controlled speed

You can set the fadeout speed to a certain value. Use below code to fadeout in 2 seconds.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).fadeOut(2000); // this will fadeout the #box region in 2 seconds
	});
});
</script>

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply