Skip to content
Related Articles

Related Articles

What is jQuery Fading Effects ?

Improve Article
Save Article
Like Article
  • Last Updated : 31 Oct, 2021

In this article, we are going to explore the fading effect in jQuery. Fading basically works with the opacity of certain elements. In jQuery, we can fade in and fade out elements with respect to opacity. In jQuery, we have several methods that will help us to achieve the fading effect. We will look for each method with proper examples.

Fading methods:

jQuery fadeIn() Method: With the help of this method, we can fade in an element that is basically hidden on the web page.

Syntax:

$(selector).fadeIn(<duration>, 
    <easing>, <callback function>);

 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- jQuery CDN link -->
    <script src=
    </script>
  
    <style>
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
  
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(41, 41, 41);
            flex-direction: column;
            height: 100vh;
        }
  
        h1 {
            color: white;
            display: none;
        }
  
        #fadein {
            position: absolute;
            top: 550px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <button id="fadein">Fade In</button>
        <h1 id="text">Text in now visible</h1>
    </div>
  
    <!-- jQuery code -->
    <script>
  
        // Initially text is invisible.
        $("#fadein").click(function () {
            $("#text").fadeIn(2000, function () {
                alert("Animation is completed");
            });
        });
    </script>
</body>
  
</html>

Output:

Example of Fade in

jQuery fadeOut() Method: This method works just opposite to the fadeIn() method, it will make an element invisible.

Syntax:

$(selector).fadeOut(<duration>, 
    <easing>, <callback function>);

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- jQuery CDN link -->
    <script src=
    </script>
  
    <style>
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
  
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(41, 41, 41);
            flex-direction: column;
            height: 100vh;
        }
  
        h1 {
            color: white;
        }
  
        #fadeout {
            position: absolute;
            top: 550px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <button id="fadeout">Fade Out</button>
        <h1 id="text">Click button to hide text.</h1>
    </div>
  
    <!-- jQuery code -->
    <script>
        $("#fadeout").click(function () {
            $("#text").fadeOut(2000, function () {
                alert("Animation is completed");
            });
        });
    </script>
</body>
  
</html>


Example of fade out

jQuery fadeToggle() Method: This method will toggle between fadeIn() and fadeOut() methods on a single button click.

Syntax:

$(selector).fadeToggle(<duration>, 
    <easing>, <callback function>);

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- jQuery CDN link -->
    <script src=
    </script>
  
    <style>
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
  
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(41, 41, 41);
            flex-direction: column;
            height: 100vh;
        }
  
        h1 {
            color: white;
            display: none;
        }
  
        .Toggle {
            position: absolute;
            top: 550px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            border-radius: 60px;
            border: none;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
  
        .Toggle:hover {
            background-color: rgb(1, 122, 17);
        }
    </style>
</head>
  
<body>
    <div class="main">
        <button class="Toggle">Fade Toggle</button>
        <h1 id="text">Text in now visible</h1>
    </div>
    <!-- jQuery code -->
    <script>
        $(".Toggle").click(function () {
            $("#text").fadeToggle("fast");
        });
    </script>
</body>
  
</html>

Output:

jQuery fadeTo() Method: In this method, it will not fade the element by default value, actually, we will pass the desired opacity value to fade in or out. 

Syntax:

$(selector).fadeTo(<duration>, <opacity>, 
        <easing>, <callback function>);

Example: In this example, we will fade out an element to the three different values.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- jQuery CDN link -->
    <script src=
    </script>
  
    <style>
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
  
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(41, 41, 41);
            flex-direction: row;
            height: 100vh;
        }
  
        #text2 {
            margin: 170px;
            color: white;
        }
  
        h1 {
            color: white;
        }
  
        #fadeto1 {
            position: absolute;
            top: 550px;
            left: 500px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
  
        #fadeto2 {
            position: absolute;
            top: 550px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
  
        #fadeto3 {
            position: absolute;
            top: 550px;
            right: 500px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <button id="fadeto1">Fade To 0.5 opacity</button>
        <button id="fadeto2">Fade To 0.2 opacity</button>
        <button id="fadeto3">Fade To 0 opacity</button>
  
        <h1 id="text1">GeeksforGeeks</h1>
        <h1 id="text2">GeeksforGeeks</h1>
        <h1 id="text3">GeeksforGeeks</h1>
    </div>
  
    <!-- jQuery code -->
    <script>
        $("#fadeto1").click(function () {
            $("#text1").fadeTo("slow", 0.5);
        });
  
        $("#fadeto2").click(function () {
            $("#text2").fadeTo("slow", 0.2);
        });
  
        $("#fadeto3").click(function () {
            $("#text3").fadeTo("slow", 0);
        });
    </script>
</body>
  
</html>

Output:

Example of Fade to


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!