In this tutorial you will learn how to fade in and out elements using jQuery Fade Methods.
jQuery fadeIn() and fadeOut() Methods
You can use the jQuery fadeIn() and fadeOut() methods to display or hide the HTML elements by gradually increasing or decreasing their opacity.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!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-1.11.3.min.js"></script> <style type="text/css"> p{ padding: 15px; background: #DDA0DD; } </style> <script type="text/javascript"> $(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> |
Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the fadeIn() and fadeOut() methods to control how long the fading animation will run. Durations can be specified either using one of the predefined string'slow' or 'fast', or in a number of milliseconds; higher values indicate slower animations.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(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> |
Note:The effect of fadeIn()/fadeOut() method looks similar to show()/hide(), but unlike show()/hide() method the fadeIn()/fadeOut() method only animates the opacity of the target elements and does not animates their dimensions.
You can also specify a callback function to be executed after the fadeIn() or fadeOut()method completes. We’ll learn more about the callback function in upcoming chapters.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> $(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> |
jQuery fadeToggle() Method
The jQuery fadeToggle() method display or hide the selected elements by animating their opacity in such a way that if the element is initially displayed, it will be fade out; if hidden, it will be fade in.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Toggles paragraphs display with fading $(".toggle-btn").click(function(){ $("p").fadeToggle(); }); }); </script> |
Similarly, you can specify the duration parameter for the fadeToggle() method likefadeIn()/fadeOut() method to control the duration or speed of the fade toggle animation.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(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> |
Similarly, you can also specify a callback function for the fadeToggle() method.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(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> |
jQuery fadeTo() Method
The jQuery fadeTo() method is similar to the .fadeIn() method, but unlike .fadeIn() thefadeTo() method lets you fade in the elements to a certain opacity level.
The required opacity parameter specifies the final opacity of the target elements that can be a number between 0 and 1. The duration or speed parameter is also required for this method that specifies the duration of the fade to animation.
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(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> |
This is all about jQuery Fade effect. For any question, you may post at our Forum Section.
