jQuery Fade
The jQuery fadeIn() and fadeOut() methods are used to display or even hide the HTML elements by increasing or decreasing their opacity gradually.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Fade-In and Fade-Out Effects</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #DDA0DD;
}
</style>
<script>
$(document).ready(function(){
// Fadeing out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<button type="button" class="out-btn">Fade Out Paragraphs</button>
<button type="button" class="in-btn">Fade In Paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Just like other jQuery effects methods, one can optionally specify the duration or speed parameter for the fadeIn() and fadeOut() methods to control how long the fading animation will run. The durations can be specified either by using one of the predefined strings' slow' or 'fast', or in some milliseconds (i.e higher values indicate slower animations).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Fade-In and Fade-Out Effects with Different Speeds</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #DDA0DD;
}
</style>
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>
</head>
<body>
<button type="button" class="out-btn">Fade Out Paragraphs</button>
<button type="button" class="in-btn">Fade In Paragraphs</button>
<p class="very-fast">This paragraph will fade in/out with very fast speed.</p>
<p class="normal">This paragraph will fade in/out with default speed.</p>
<p class="fast">This paragraph will fade in/out with fast speed.</p>
<p class="slow">This paragraph will fade in/out with slow speed.</p>
<p class="very-slow">This paragraph will fade in/out with very slow speed.</p>
</body>
</html>
More so, you can specify a callback function to be executed after the fadeIn() or fadeOut() method is complete. In subsequent tutorials, you will learn more about the callback function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Fade-In and Fade-Out Effects with Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #DDA0DD;
}
</style>
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>
</head>
<body>
<button type="button" class="out-btn">Fade Out Paragraphs</button>
<button type="button" class="in-btn">Fade In Paragraphs</button>
<p>This is a paragraph.</p>
</body>
</html>jQuery fadeToggle() Method
in this case, the jQuery fadeToggle() method display or hide the selected elements by animating their opacity in a way that if the element is previously displayed, it will fade out; and if hidden, it will be fade in (i.e it toggles the fading effect).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Fade-Toggle Effect</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #DDA0DD;
}
</style>
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Fade Toggle Paragraphs</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Same here, you can also specify the duration parameter for the fadeToggle() method such as the fadeIn()/fadeOut() method to control the duration or speed of the fade toggle animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Fade-Toggle Effect with Different Speeds</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #DDA0DD;
}
</style>
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Fade Toggle Paragraphs</button>
<p class="very-fast">This paragraph will fade in/out with very fast speed.</p>
<p class="normal">This paragraph will fade in/out with default speed.</p>
<p class="fast">This paragraph will fade in/out with fast speed.</p>
<p class="slow">This paragraph will fade in/out with slow speed.</p>
<p class="very-slow">This paragraph will fade in/out with very slow speed.</p>
</body>
</html>
Also, you can also specify a callback function for the fadeToggle() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Fade-Toggle Effect with Callback</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
padding: 15px;
background: #DDA0DD;
}
</style>
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>
</head>
<body>
<button type="button" class="toggle-btn">Fade Toggle Paragraphs</button>
<p>This is a paragraph.</p>
</body>
</html>
jQuery fadeTo() Method
The jQuery fadeTo() method is quite similar to the .fadeIn() method, however unlike .fadeIn(), the fadeTo() method allows you to fade in the elements to a certain opacity level.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Fade-To Effect</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
p{
display: none;
padding: 15px;
background: #DDA0DD;
}
</style>
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>
</head>
<body>
<button type="button" class="to-btn">Fade To Hidden Paragraphs</button>
<p class="none">This is a paragraph.</p>
<p class="partial">This is another paragraph.</p>
<p class="complete">This is one more paragraph.</p>
</body>
</html>