Open In App

What is jQuery Fading Effects ?

Improve
Improve
Like Article
Like
Save
Share
Report

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: In this example, we are using the above-explained method.

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: In this example, we are using the above-explained method.

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: In this example, we are using the above-explained method.

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



Last Updated : 22 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads