jQuery Effects - FadeIn

jQuery Effects - FadeIn: Learn about the jQuery fadeIn() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 22, 2022

jQuery fadeIn() Method

The fadeIn() method of jQuery helps to fade in the respective element. Fade here means that the specified element will get visible, i.e., the opacity of the element will keep on increasing. This method will not make the elements visible which are in the hidden state. It will only work for those whose display property is none initially. This method again helps to add various similar kinds of effects on the website for the user making the webpage more interactive and dynamic.

fadeIn() Method Syntax

$(selector).fadeIn();
$(selector).fadeIn(speed, easing, callback);

The speed as a parameter here indicates the speed of the elements that get faded IN. It can be specified as – slow, fast, normal, or even in milliseconds. The default value of the speed is normal. The easing is also an optional parameter that takes – swing, linear as its values. The callback refers to the function which gets called when the fadeIn() method finishes its task.

Let's have a look at the following given example which explains the usage of the fadeIn() jQuery method very efficiently.

jQuery fadeIn() Method Example

<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - FadeIn</h2>
    <p>Click the button to Fade the content on the page.</p>
    <button>Fade In</button>
    <hr>
    <h3 style="display: none;">THIS CONTENT IS NOW VISIBLE !!!</h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            $('h3').fadeIn('slow');
        })
    });
  </script>
</html>

Output:

jQuery - Effects: Toggle

jQuery - Effects: FadeOut

Comments and Discussions!

Load comments ↻