Ex No: 10 FADE OUT AND FADE IN
Aim: To write a JQuery code to Fade Out and Fade In DIV.
Algorithm
Step1: Create a folder “Ex10” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Create a folder “script” and place “jquery-3.5.1.min.js” file in it.
Step4: Add JQuery code to Fade Out and Fade In div.
Source Code

index.html


<!DOCTYPE html>
<html>
 <head>
  <title>Fade In and Fade Out</title> 
 <style>
   header {
    text-align:center;
    height: 100px;
    background-color: silver;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
   }
   footer {
    text-align:center;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    background-color: silver;
    padding: 10px;
    border-radius: 10px;
   }
   article{
    width: auto;
    padding: 10px;
    margin:5px;
    overflow-x: auto;
   }
   div{
    background-color:LightGray;
    font-size:20px;
   }

 </style>
 <script src="script/jquery-3.5.1.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){  
  $("#fadeout").click(function() {
    $("div").fadeOut(3000);
  });
  $("#fadein").click(function() {
    $("div").fadeIn(3000);
  });
 });
 
 </script>
 </head>
 <body>  
  <header>
    <h1>Fade In and Fade Out Using JQuery</h1>
  </header> 
  <article>
    <hr>
    <div>Fadeout and FadeIn Effects are implemented on this text content.</div><br>
    <input type="button" id="fadeout" value="Fade Out"/>
    <input type="button" id="fadein" value="Fade In"/>
  </article>
  <footer>
    Developed by K Anbarasan
  </footer>
 </body>
</html>
Result: Thus JQuery code is written to Fade Out and Fade In DIV.