jQuery Fade Out Function Method

How to fade out the HTML content using jQuery?

We can simply fade out the appeared or displayed HTML item gradually. Basically the fading out is the jQuery function which disappear the HTML element or tag gradually. We can set the time parameter that how the fading out should happen like slow, 1 second, 2 seconds etc.

Syntax of fading out jQuery


jQuery fadeOut() function

The div section will already appear first then it will disappear gradually using fadeOut function on button click.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mydiv"> You are at the CodingPK jQuery Fade Out tutorial. Just follow the Chapter Sequence. </div> <button id="mybutton">Click Me to Fade Out</button> <script type="text/javascript"> $("#mybutton").click(function(){ $("#mydiv").fadeOut("6000"); }); </script>

Output of jQuery fadeOut()

You are at the CodingPK jQuery Fading tutorial. Just follow the Chapter Sequence.

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

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

Chapter Next »