Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain the concept of fade effect in jQuery ?

  • Last Updated : 19 Aug, 2021

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.

    Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

    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 elloborates 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
Recommended Articles
Page :