jQuery Tutorial

<!DOCTYPE html>
  <html>

  <head>
    <link rel="stylesheet" href="jqueryTutorial.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="jqueryTutorialDemo2.js"></script>
  </head>

  <body>

    <p>Click on the button below to see the fadeOut() Effect Method demonstrated.
    Reload this page to reset.</p>

    <button>Click to fade out boxes</button><br><br>

    <div id="div1"></div><br>
    <div id="div2"></div><br>
    <div id="div3"></div>

  </body>

  </html>

CSS Code for Demo

div {
  width: 80px;
  height: 80px;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: green;
}

#div3 {
  background-color: blue;
}

JavaScript Code for Demo

/* Prevent any jQuery code from running before the document is finished loading 
  (is ready). */
  $(document).ready(function () {
    /* Attaches event handler to button element so that when the button is 
    clicked, the instruction inside this function is run. */
    $("button").click(function () {
      /* Each ID is selected and then told to "fadeOut" at various rates of speed. 
      div1 fades out at the default rate. div2 fades out at the "slow" rate. And, 
      div3 fades out over 3,000 milliseconds (or three seconds). */
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });
  });

jQuery fadeOut() Effect Method Demonstration

HTML Code for Demo

CSS Code for Demo

JavaScript Code for Demo

Click on the button below to see the fadeOut() Effect Method demonstrated. Reload this page to reset.