jQuery Fading Fade In Function Method

jquery jQuery Fading Fade In Function Method Jquery Fade Function

How to fade in and fade out the HTML content using jQuery?

Basically the jQuery fading is use to show or hide the content gradually. Fade in appears gradually out of darkness while fade out gradually disappears. In jQuery we simply use the fadeIn() and fadeOut() functions for fading.

Syntax of fading in jQuery


We are now considering two below example to fade in and in next chapter fade out the HTML content.

jQuery fadeIn() function

We first set the display none attribute to the div section then it will appear gradually using fadeIn function on button click.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mydiv" style="display: none;"> You are at the CodingPK jQuery quick and easy learning series. Just follow the Chapter Sequence. </div> <button id="mybutton">Click Me to Fade In</button> <script type="text/javascript"> $("#mybutton").click(function(){ $("#mydiv").fadeIn("6000"); }); </script>

Output of jQuery fadeIn()

Note ! fadeIn() function parameter is optional , you can pass null value or time value. For example

  • fadeIn("") with no parameter.
  • fadeIn("2000") with parameter 2 seconds.
  • fadeIn("slow") with parameter slow.

jquery Jquery Fade Function Chapter Next »