01
Jul
2012

jQuery FadeIn effect

Posted in: jQuery , No Comments

jquery_logo
jQuery FadeIn method is used to display the matched element with fadein effect. Thus you can show an element with Fade effect using FadeIn method.

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 then first hide the box region and then FadeIn to show the box.

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

Done!!!
Check below link for live demo.

FadeIn with slow speed

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

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

FadeIn with fast speed

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

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

FadeIn with controlled speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).FadeIn(2000); // this will FadeIn 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