Skip to content
Related Articles
Open in App
Not now

Related Articles

Explain the concept of fade effect in jQuery ?

Improve Article
Save Article
  • Last Updated : 06 Jun, 2022
Improve Article
Save Article

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);

Below example elaborates the concept of 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  -->
            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=
         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  -->
            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=
         id='img1' height='150px' width='250px'>
    <img>
 
    <script>
        $(document).ready(function() {
            $('#btnfadeTo').click(function() {
                $('#img1').fadeTo('slow', 0.4);
            });
        });
    </script>
</body>
 
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!