Metodi fadeTo() häivytyksen toteutuksessa.

Häivytys h3-otsikko id-tunniste

Häivytys h3-otsikko class-tunniste

Häivytys h3-otsikko id-tunniste

Esimerkissä näytetään ja piiloitetaan HTML-elementit www-sivulta. HTML-elementteinä voi käyttää esim. kuvia, taulukoita, div-laatikoita tai lomakkeita.

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(){
      $("#div1").fadeToggle();
      $(".div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
     });
    });
   </script>
   

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

   #div1{
    color:maroon;
   }
   .div2{
    color:blue;
   }
   #div3{
    color:cyan;
   }

www-sivun body-elementin HTML-koodaus:

   <button> Näytä / Piilota </button><br><br>
   <H3 id="div1"> Häivytys h3-otsikko id-tunniste </H3>
   <H3 class="div2"> Häivytys h3-otsikko class-tunniste </H3>
   <H3 id="div3"> Häivytys h3-otsikko id-tunniste </H3>