01
Jul
2012

jQuery FadeTo effect

Posted in: jQuery , No Comments

jquery_logo
jQuery FadeTo method is used to fade the matched elements to certain a opacity. This is cool mouse hover effect for images.

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

General Syntax

.fadeTo( duration, opacity)

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 FadeTo to show the box.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).fadeTo( 'slow', 0.2); // this will fade the #box region to 0.2 opacity on mouse hover.
	});
});
</script>

Done!!!
Check below link for live demo.

FadeTo with fast speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).fadeTo( 'fast', 0.2); // this will fade the #box region to 0.2 opacity on mouse hover.
	});
});
</script>

FadeTo with controlled speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).fadeTo( 2000, 0.2); // this will fade the #box region to 0.2 opacity on mouse hover.
	});
});
</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