Objectives and outcomes

In this tutorial we are going to learn about jquery fade effect. We can fade DOM elements visibility using jquery fadeIn(), fadeOut() and fadeTo() methods. Example for the same is shown below:



Syntax for method

$(selector).fadeOut(speed,callback);
$(selector).fadeIn(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

You can learn about selector in our Jquery selector tutorial while the speed parameter defines the pace of the effect. It can have values like "slow", "fast" and milliseconds. callback parameter is a function which is executed after the fade method complete its execution.
Note: Both the parameters are optional in fadeIn() and fadeOut() method.
While the opacity and speed parameter in fadeTo() method is not optional.




Learn Jquery with codeshot !!







HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Jquery fade effect</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div id="example">
<br/>
<p><b>Learn Jquery with codeshot !!</b></p><br/>
</div>
<br/>
<button id="butn1">fadeOut</button><br/>
<button id="butn2">fadeIn</button><br/>
<button id="butn3">fadeTo</button>
</body>
</html>


CSS stylesheet

<style>
#example
{
color:#000;
font-size:24px;
height:100px;
text-align:center;
}
</style>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
$('#example').fadeOut();
});
		
$('#butn2').click(function()
{
$('#example').fadeIn();
});

$('#butn3').click(function()
{
$('#example').fadeTo('slow',0.3);
});
});
</script>