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.
$("TagSelector").fadeIn("OptionalTimeParameter");
We are now considering two below example to fade in and in next chapter fade out the HTML content.
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>
Note ! fadeIn() function parameter is optional , you can pass null value or time value. For example