How to fade an element in the Jquery?

Answer:

This fade action Hides/shows an element in jquery in the html page.

Example:

This is the version of Jquery written with in the script

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

This is the link of stylesheet and a link of Jquery:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">


Code for the Fade function

<style>

  #Fade {

    width: 300px;

    height: 150px;

    color:white;

    background-color:blue;

  }

  </style>

        <p>Click around box for the action </p>

       

        <div id="Fade">Hide the text box</div>



        <script>

    $(document).click(function () {

        $("#Fade").toggle("fade");

    });

        </script>