JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Fading Effects

In this tutorial you will learn how to fade in and out elements using jQuery.

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.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Fading out displayed paragraphs
  •     $(".out-btn").click(function(){
  •         $("p").fadeOut();
  •     });
  •     
  •     // Fading in hidden paragraphs
  •     $(".in-btn").click(function(){
  •         $("p").fadeIn();
  •     });
  • });
  • </script>

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.

  • <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.

  • <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 (i.e. toggles the fading effect).

  • <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 like fadeIn()/fadeOut() method to control the duration or speed of the fade toggle animation.

  • <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.

  • <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() the fadeTo() method lets you fade in the elements to a certain opacity level.

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

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.

  • <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>

Your Feedback:

We would love to hear from you, please drop us a line.