jQuery Fading Fade In Function Method


jquery jQuery Fading Fade In Function Method Fade In And Fade Out By JQuery

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

$("TagSelector").fadeIn("OptionalTimeParameter");

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 Fade In And Fade Out By JQuery Chapter Next »