Learn how to build and design websites with our tutorials.

jQuery Fading Effects Tutorial

jQuery has several methods that allow you to easily fade selected HTML elements in and out of visibility.

View Tutorial Contents


jQuery .fadeOut() And .fadeIn() Methods

The jQuery .fadeOut() method gradually changes the opacity of selected HTML elements from visible to hidden. The jQuery .fadeIn() method gradually changes the opacity of selected HTML elements from hidden to visible.

The jQuery .fadeOut() and .fadeIn() methods are usually used together.

The syntax for the .fadeOut() and .fadeIn() methods is:


$(selector).fadeTo(speed, easing, callback);

And:


$(selector).fadeIn(speed, easing, callback);

The example code below shows you how to apply the .fadeOut() and .fadeIn() methods to selected HTML elements.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<button id="fade-out">Fade Out</button> <button id="fade-in">Fade In</button>

<script>

$(document).ready(function(){
	$("#fade-out").click(function(){
		$("p").fadeOut();
	});
	$("#fade-in").click(function(){
		$("p").fadeIn();
	});
});

</script>
</body>
</html> 

The jQuery .fadeOut() and .fadeIn() methods will be applied to the paragraph that is hidden below.

This is a paragraph.


jQuery Fade Parameter Options

Both jQuery .fadeOut() and .fadeIn() methods accept three optional parameters: speed, easing and callback.


How To Set Fade Speed Parameters

The example code below shows you how to set the speed and the easing parameter in the .fadeOut() and .fadeIn() methods.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<button id="fade-out">Fade Out</button> <button id="fade-in">Fade In</button>

<script>

$(document).ready(function(){
	$("#fade-out").click(function(){
		$("p").fadeOut(5000);
	});
	$("#fade-in").click(function(){
		$("p").fadeIn("fast");
	});
});

</script>
</body>
</html> 

The jQuery .fadeOut() and .fadeIn() methods both have the speed and easing parameters set.

This is a paragraph.


How To Set Fade Callback Parameter

The example code below shows you how to set the callback parameter in the .fadeOut() and .fadeIn() methods.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<button id="fade-out">Fade Out</button> <button id="fade-in">Fade In</button>

<script>

$(document).ready(function(){
	$("#fade-out").click(function(){
		$("p").fadeOut();
	});
	$("#fade-in").click(function(){
		$("p").fadeIn(4000, function(){
			$("p").css("background" , "yellow");
		});
	});
});

</script>
</body>
</html> 

The jQuery .fadeOut() and .fadeIn() methods both have the callback parameters set.

This is a paragraph.


jQuery .fadeToggle() Method

The jQuery .fadeToggle() method toggles between fading HTML elements in and out of visibility. Elements that are visible, are faded out and elements that are not visible and faded in.

The syntax for the .fadeToggle() method is:


$(selector).fadeToggle(speed, easing, callback);

The .fadeToggle() method accepts that same parameters as the .fadeOut() and .fadeIn() methods.

The example code below shows you how to apply the .fadeToggle() method to an HTML element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<p>
This is a paragraph.
</p>

<button>Fade Toggle</button>

<script>

$(document).ready(function(){
	$("button").click(function(){
		$("p").fadeToggle();
	});
});

</script>
</body>
</html> 

The jQuery .fadeToggle() is applied to the paragraph below.

This is a paragraph.


jQuery .fadeTo() Method

The jQuery .fadeTo() method adjust the opacity of selected HTML elements.

The syntax for the .fadeTo() method is:


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

The speed and the opacity parameters are required. The callback parameter is not required.

The speed parameter is the same as in the .fadeOut(), .fadeIn() and the .fadeToggle() methods. The opacity parameter is a number value from 0 to 1, denoting the target opacity.

The callback parameter is also the same as in the .fadeOut(), .fadeIn() and the .fadeToggle() methods.

The example code below shows you how to apply the .fadeTo() method to an HTML element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>
div{
	width: 12.5em; /* 200px */
	height: 12.5em; /* 200px */
	border: 0.063em solid black; /* 1px */
	background: green;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
Heading
</h1>

<div>

<p>
This is a paragraph.
</p>

</div>

<button id="button1">Fade To Lightest</button> <button id="button1">Fade To Light</button> <button id="button1">Fade To Dark</button>

<script>

$(document).ready(function(){
	$("#button1").click(function(){
		$("div").fadeTo("slow", 0.1);
	});
	$("#button2").click(function(){
		$("div").fadeTo(4000, 0.5);
	});
	$("#button3").click(function(){
		$("div").fadeTo("fast", 1);
	});
});

</script>
</body>
</html> 

The jQuery .fadeTo() is applied to the <div> below.

This is a paragraph.