Objectives and outcomes

In this tutorial we are going to learn about two jquery effects, one is the fadein and the other is fadeout. The fadein and fadeout effects in javascript is mostly binded with hover or click event. The example for fadein and fadeout effect is given below :






You have the cursor on "hover me" button


Click on the "click me!!" button to see the effect



HTML code:

<html>
<body>
<div>
<button id="butn1">Hover me!!</button><br/><br/>
<button id="butn2">Click me!!</button>
</div>
<div>
<div id="1" style="text-align:center; background-color:"#585858"; color:"#FFFFFF";">
<h3>You have the cursor on "hover me" button</h3>
</div>
<br/>
<div id="2" style="text-align:center; background-color:"#585858"; color:"#FFFFFF";">
<h3>Click on the "click me!!" button to see the effect</h3>
</div>
</div>
<script src="jquery.min.js"></script>
</body>
</html>





Javascript:

<script>
$(document).ready(function() 
{
	$("#butn1").hover(function()
	{
		$("#1").fadeIn("slow");
	});
	
	$("#butn1").mouseleave(function()
	{
		$("#1").fadeOut("slow");
	});
	
	$("#butn2").click(function()
	{
		$("#2").fadeToggle("slow");
	});
	
});
</script>


For the above script to work we have to include jquery.min.js file in our document beacause fadein and fadeout are jquery functions. For the first button as we hover on it the div with id=1 slowly fadesin because the slow argument in fadeIn function call is for duration and when we remove the cursor from the button the div fadesout slowly.
For the second button as we click on the button the opposite action takes place i.e. if the div is visible then it gets fadeOut or if it is hidden the it gets fadeIn this is because here we have used fadeToggle() function which toggle between fadein and fadeout action.