Fade effect using jQuery

In this jQuery tutorial I will show you how to apply fade / glow effect over any image / region using jQuery.

I will first create a square region of 200 X 200 px and then apply a fade effect on mouse hover.

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 fade it to opacity 0.5 on mouse hover.

</style>
<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).animate({'opacity' : 0.5});
	});
});
</script>

Done!!!
Check below link for live demo.

Fade with slow speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).animate({'opacity' : 0.5}, 'slow');
	});
});
</script>

Fade with Fast speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).animate({'opacity' : 0.5}, 'fast');
	});
});
</script>

Fade with Pre-defined speed

You can set the fade speed to a certain value. Use below code to fade in 3 seconds.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).animate({'opacity' : 0.5}, 3000);
	});
});
</script>