Metodi fadeTo() häivytyksen toteutuksessa.

Häivytys h3-otsikkotekstiin

Häivytys p-elementin tekstiin

Esimerkissä käytetyt koodaukset ja CSS-ohjeet

www-sivun head-elementiin JQuery-koodaukset:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <script>
    $(document).ready(function(){
     $("button").click(function(){
      $(".otsikko").fadeTo("slow", 0.25);
      $(".laatikko").fadeTo("slow", 0.7);
      $("#teksti").fadeTo("slow", 0.5);
     });
    });
   </script>
   

www-sivun head-elementin style-elementissä CSS-ohjeet:

   .laatikko{
    width:80px;
    height:50px;
    background-color:blue;
    color:white;
    padding:10px;
   }
   .otsikko{
    color:maroon;
   }
   .teksti{
    color:black;
   }

www-sivun body-elementin HTML-koodaus:

   <button>Klikkaa painiketta</button><br><br>
   <H3 class="otsikko"> Häivytys h3-otsikkotekstiin </H3>
   <div class="laatikko"> Häivytys div-laatikko </div>
   <p id="teksti"> Häivytys p-elementin tekstiin </p>