Fade On Off effect using jQuery

Image may be NSFW.
Clik here to view.
We have already learned how to apply Fade / Glow effect using jQuery in this post. But there, the image didn’t come back to normal opacity after removing mouse. In this jQuery tutorial I will show you how to apply fade on off effect with mouse hover.

In this tutorial:
When you mouse hover a region it will fade and when you remove the mouse from the region it will go back to initial state.

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 and then go back to opacity 1 on removing mouse.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).animate ( {'opacity' : 0.5}); // animate to opacity 0.5 on mouse hover
	},
	function(){
	$(this).animate( {'opacity' : 1 });  // Bring back to opacity 1 on removing mouse
        }
	);
});
</script>

Done!!!
Check below link for live demo.

Everything is fine in above code, but if you mouse on off many times and quickly, it will continue animating till it completes all mouse hover actions. This is little irritating and we do not want. So, we will tell jQuery to first stop previous command and than execute the new command. This is done using stop() command.

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).stop().animate ( {'opacity' : 0.5}); // animate to opacity 0.5 on mouse hover
	},
	function(){
	$(this).stop().animate( {'opacity' : 1 }); // Bring back to opacity 1 on removing mouse
        }
	);
});
</script>

Done!!!
Check below link for live demo.

We can also control the speed of fade.

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).stop().animate ( {'opacity' : 0.5}, 'slow'); // animate to opacity 0.5 on mouse hover
	},
	function(){
	$(this).stop().animate( {'opacity' : 1 });	// Bring back to opacity 1 on removing mouse
    }
	);
});
</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).stop().animate ( {'opacity' : 0.5}, 'fast'); // animate to opacity 0.5 on mouse hover
	},
	function(){
	$(this).stop().animate( {'opacity' : 1 });	// Bring back to opacity 1 on removing mouse
    }
	);
});
</script>

Fade with controlled speed

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

<script type="text/javascript">
$(document).ready(function() {
	$("#box").hover(function() {
	$(this).stop().animate ( {'opacity' : 0.5}, 2000); // animate to opacity 0.5 on mouse hover
	},
	function(){
	$(this).stop().animate( {'opacity' : 1 });	// Bring back to opacity 1 on removing mouse
    }
	);
});
</script>