jQuery Effects - FadeOut

jQuery Effects - FadeOut: Learn about the jQuery fadeOut() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 22, 2022

jQuery fadeOut() Method

The fadeOut() method of jQuery helps to fade out the respective element. Fade here means that the specified element will get lighter and lighter until it gets completely invisible, i.e., the opacity of the element will keep on decreasing. This method will not make the selected element hidden. It will just make its display fade out. This method again helps to add various similar kinds of effects on the website for the user making the webpage more interactive and dynamic.

fadeOut() Method Syntax

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

The speed as a parameter here indicates the speed of the elements that get faded out. It can be specified as – slow, fast, normal, or even in milliseconds. The default value of the speed is normal. The easing is also an optional parameter that takes – swing, linear as its values. The callback refers to the function which gets called when the fadeOut() method finishes its task.

Let's have a look at the following given example which explains the usage of the fadeOut() jQuery method very efficiently. When the button is clicked to make the content slowly fade out, the content vanishes completely.

jQuery fadeOut() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - FadeOut</h2>
    <p>Click the button to Fade Out the content on the page.</p>
    <button>Fade Out</button>
    <hr>
    <h3>REMOVE THIS CONTENT BY FADING OUT !!!</h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            $('h3').fadeOut('slow');
        })
    });
  </script>
</html>

Output:

jQuery - Effects: FadeIn

jQuery - Effects: FadeToggle

Comments and Discussions!

Load comments ↻