Explain the concept of fade effect in jQuery ?

Last Updated : 02 Jun, 2023

The fading effect in jQuery can be created using different methods like fadeIn(), fadeOut(), fadeToggle(), and fadeTo(). These methods can be used to create different fading effects in jQuery with different parameters.

fadeIn(): This method is used to make the element hidden with a fading effect.

Syntax:

$('selector').fadeIn(speed, callback_function);

fadeOut(): This method is used to make the element visible to hidden with a fading effect.

Syntax:

$('selector').fadeOut(speed, callback_function);

fadeToggle(): This method is used to toggle between fadeIn() and fadeOut() methods with the fading effects.

Syntax:

$('selector').fadeToggle(speed, callback_function);

fadeTo() : This method is used to fade the visible element to some extent of opacity given in the parameters with reference to 1.

Syntax:

$('selector').fadeTo(speed, opacity, callback_function);

The below example elaborates on the concept of a few fade effects.

Example 1: The following code shows that the image toggles between the fadeIn() and fadeOut() methods.

HTML

<!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">
 
    <!-- Including jQuery  -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
 
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: #006600;
        }
         
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <button id="btnfadeToggle">FADE TOGGLE</button>
    <br>
 
    <!-- Image added using img tag with src attribute -->
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210728124621/geekslogo.png"
         id='img1' height='150px' width='250px'>
    <img>
 
    <script>
        $(document).ready(function() {
            $('#btnfadeToggle').click(function() {
                $('#img1').fadeToggle('slow');
            });
        });
    </script>
</body>
</html>

Output:

Example 2: The following code shows the fadeTo() method in jQuery which is used to change the opacity of the selected element.

HTML

<!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">
 
    <!-- Including jQuery  -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
 
    <style>
        h1 {
            color: #006600;
        }
         
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <button id="btnfadeTo">FADE TO</button>
    <br>
 
    <!-- Image added using img tag with 
        src attribute -->
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210728124621/geekslogo.png"
         id='img1' height='150px' width='250px'>
    <img>
 
    <script>
        $(document).ready(function() {
            $('#btnfadeTo').click(function() {
                $('#img1').fadeTo('slow', 0.4);
            });
        });
    </script>
</body>
</html>