jQuery - Efektit

JQuery efektit

Taulukon metodi-sarakkeissa on linkki esimerkki-koodaukseen ja metodi-esimerkki osissa on linkkejä soveltaviin esimerkkeihin.

Taulukko JQuery:n metodit efektien ttoteuttamiseen.

Metodi Selitys
animate() Käynnistää animaation, esim div-laatikon esiin tulon tai koon muuttumisen
callback Iilmoitus jonkin tapahtuman loppumisesta, callback ei ole metodi
clearQueue() Pysäyttää animaatio-tapahtuman mutta jatkaa käynnissä olleen animaation loppuun
delay() Viive, aika kuinka kauan efektin tapahtuminen kestää
dequeue() Päättää animaatio-tapahtuman joka on luotu queue()-metodilla
fadeIn() Tuo hidastetusti HTML-elementin näkyviin
fadeOut() Poistaa näkyvistä hidastutetusti HTML-elementin
fadeTo() Himmentää HTML-elementin näkyvyyttä asetetun ajan aikana
fadeToggle() Poistaa näkyvistä ja tuo näkyviin HTML-elementin hidastutetusti
finish() Pysäyttää animaation tapahtumisen sekä suorittaa välittömästi animaation loppuun
hide() Piilottaa HTML-elementin sisällön näkyvistä
queue() Esim näyttää kuinka monta muutosta animaatio sisältää
show() Näyttää HTML-elementin sisällön
slideDown() Näyttää HTML-elementin liukumalla alas
slideToggle() Näyttää liukumalla alas sekä piilottaa liukumalla ylös HTML-elementin
slideUp() Piilottaa HTML-elementin liukumalla ylös
stop() Pysäyttää käynnissä olevan animaation, animaatiota voidaan jatkaa pysäytys-kohdasta
toggle() Näytä ja piilota HTML-elementti

Animaatio - animate()

Animointi voi tarkoittaa esimerkiksi jonkin HTML-elementin siirtymistä uuteen paikkaan.

Metodin syntaksi:

$(valitsin).animate({parametrit},nopeus,funktio);

Esimerkissä painikkeella käynnistetään animaatio, div-laatikko liikkuu vasemmalle.

Esimerkin koodaus:


 <!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
   <script>
	$(document).ready(function(){
     $("button").click(function(){
      $("div").animate({left: '250px'});
     });
    });
   </script> 
   <style>
   .painike {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 6px;
    cursor: pointer;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
   }
   .painike:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
   }
   .painike:active {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.24),0 7px 50px 0 rgba(0,0,0,0.19);
   }
   .laatikko{
     background:#FFD0C8;
	 border:1px solid #0D3504;
	 height: 50px;
	 width: 100px;
	 margin: 4px 6px;
	 position:absolute;
     padding: 15px 25px 30px 30px;
     text-align: center;	 
   }
   .vari2{
    color: slateblue;
   }
   </style>
  </head>
  <body>

   <button class="painike"> Käynnistä animaatio </button>

   <div class="laatikko vari2"> Animaatiossa HTML-elementtinä DIV-laatikko </div>

  </body>
 </html>

Soveltavat animate-esimerkit:

Animoitu div:n siirtäminen ja CSS-ohjeiden muuttaminen JQuery:llä. - siirtäminen, div:n koon ja läpinäkyvyyden muuttaminen.

Animoitu div:n siirtäminen ja div:n sekä tekstin suhteellinen koon muutos. - siirtäminen, div:n ja tekstin koon muuttaminen.



"Häivytä näkyviin ja/tai pois" fadeIn(), fadeOut() ja fadeToggle

Metodeita fadeIn() ja fadeOut() voi käyttää yhdessä tai erikseen. Metodilla fadeIn() näytetään HTML-elementti, id- tai class-tunnisteinen elementti www-sivulle. Metodilla fadeOut() poistetaan www-sivulta näkyvistä. Metodilla fadeToggle() voi näyttää sekä poistaa näkyvistä.

Metodien syntaksit:

$(valitsin).fadeIn(nopeus,muutos,ilmoitus);
$(valitsin).fadeOut(nopeus,muutos,ilmoitus);
$(valitsin).fadeToggle(nopeus,muutos,ilmoitus);
$(valitsin).fadeTo(nopeus,muutos,ilmoitus);

Esimerkissä on kaksi painiketta. Painikkeilla häivytetään pois tai esiin div-toteutettu tekstilaatikko joka on liitetty metodiin .laatikko tunnisteella.

Koodaus, metodin koodauksessa käytetään painikkeiden id-tunnuksia #pois ja #esiin. Esiin ja piiloon www-sivulta saadaan käyttämällä CSS-ohjeen tunnistetta.


 JQuery, head-elementissä script-elementin sisällä:
 
 $(document).ready(function(){
  $("#pois").click(function(){
   $(".laatikko").fadeOut();
  });
  $("#esiin").click(function(){
   $(".laatikko").fadeIn();
  });
 });;
 

 HTML-koodaus:
 
 <button id="esiin" class="painike"> Näytä </button>
 <button id="pois" class="painike"> Piilota </button>
 <div class="laatikko vari2"> Tämän sisältönä voi olla HTML-elementtejä CSS-muotoiltuna. </div>

Soveltavat fade-esimerkit:

CLASS- ja ID-tunnisteiden käyttäminen häivytyksessä läpikuultavaksi. - CSS-ohjeiden liittäminen HTML-elementiin ja läpinäkyvyyden muuttaminen.

CLASS- ja ID-tunnisteiden käyttäminen HTML-elementtiä näyttämisessä sekä poistamisessa näkyviltä painikkeella. - HTML-elementti painikeella esiin ja pois sivulta.



Liu'uta auki/kiinni - slideDown(), slideUp(), slideToggle()

Liu'uta-sana tarkoittaa HTML-elementin avautumista tai sulkeutumista näkyville liukumalla.

Metodin syntaksit, esim:

$(valitsin).slideDown(nopeus,funktio);
$(valitsin).slideUp(nopeus,funktio);
$(valitsin).slideToggle(nopeus,funktio);

Esimerkissä on painike josta avautuu sekä sulkeutuu laatikko. Sekä painikkeella ja avautuvalla laatikolla on yhteinen CSS-ohje. Esimerkissä käytetään id-tunnisteita JQuery:n slideToggle() liitämisessä toimintaan.

Esimerkin koodaukset:


 JQuery, head-elementissä script-elementin sisällä:
 
   $(document).ready(function(){
     $("#flip").click(function(){
      $("#panel").slideToggle("slow");
     });
    });
 

 HTML-koodaus, body-elementtiin:
 
  <div id="flip">Avaa tai sulje klikkamalla</div>
  <div id="panel"> 
   <p>Tämän sisältönä voi olla kuva ja tekstiä, lomake, video yms.</p> 
   <p>Käytä div:n toteutuksessa HTML-elementtejä ja CSS-ohjeita.</p> 
   <p>Myös esim php- tai script-ohjelmia voi sijoittaa tähän 
	    div-elementtiin.</p>
  </div>
  
  
  CSS-ohjeet, style-elementtiin:
  
   #panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #dad8e8;
    border: solid 1px #4B0082;
   }
   #panel {
    padding: 50px;
    display: none;
   }

Piilota/näytä - toggle(), hide(), show()

Piilota tai näytä HTML-elementti tai elementit.

Metodin syntaksit, esim:

$(valitsin).show(nopeus,funktio);
$(valitsin).hide(nopeus,funktio);
$(valitsin).toggle(nopeus,funktio);

Esimerkissä on tyylikkäämpi painike josta avautuu sekä sulkeutuu www-sivun kaikki p-elementit. Toiminto on toteutettu toggle-funktiolla. Toisinaan on tarve näyttää HTML-elementillä esim vastaus, käytä silloin show-funktiota. HUOMAA, ole tarkkana kuinka liität HTML-elementteihin funktiot jotta ettet piiloita koko sivun sisältöä !

Esimerkin koodaukset:


 JQuery, head-elementissä script-elementin sisällä:
 
    $(document).ready(function(){
     $("button").click(function(){
      $("p").toggle();
     });
    });
 

 HTML-koodaus, body-elementtiin:
 
  <button class="button">Piilota ja näytä tekstit </button>

  <p>HTML-elementit voidaan piiloittaa ja/tai näyttää.</p>
  <p>Esimerkissä käytetään toggle-funktiota.</p>
  
  
  CSS-ohjeet, style-elementtiin:
  
   .button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 10px 10px 5px #666;
   }
   .button:hover {background-color: #3e8e41}
   .button:active {
    background-color: #3e8e41;
    box-shadow: 3px 3px 5px #666;
    transform: translateY(4px);
   }

hide() ja show() metodit

Esimerkissä Avaa-painikkeella näytetään teksti-laatikko ja laatikossa olevasta tekstistä suljetaan teksti-laatikko.

Esimerkin koodaukset:


 JQuery, head-elementissä script-elementin sisällä:
 
 $(document).ready(function(){
   $("#sulje").click(function(){
     $("#poksi").hide();
   });
   $(".nayta").click(function(){
     $("#poksi").show();
   });
 });
 

 HTML-koodaus, body-elementtiin:
 
 <button class="nayta"> Näytä ilmoitus </button>
  
 <div id="poksi"> 
  <h4> ILMOITUS </h4>
  <p>Sulje tämä alla olevasta Sulje-tekstistä</p>
  <h4 id="sulje"> Sulje </h4>
 </div>
  
  
 CSS-ohjeet, style-elementtiin:
  
 #poksi {
  width: 300px;
  border: 2px solid green;
  padding: 10px;
  margin: 10px;
  text-align: center;
 }

Pysäytä - stop()

Piilota tai näytä HTML-elementti tai elementit.

Metodin syntaksit, esim:

$(valitsin).stop(tunniste,funktio);

Esimerkissä Näytä-painikkeella avataan viesti-laatikko jonka avautuminen kestää noin 5 sekunttia. Stop-painikkeella voi keskeyttää avautumisen ja Näytä-painikkeella jatkaa avautumista.

Esimerkin koodaukset:


 JQuery, head-elementissä script-elementin sisällä:
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
  </script>
  <script>
  $(document).ready(function(){
   $("#flip").click(function(){
    $("#panel").slideDown(5000);
   });
   $("#stop").click(function(){
    $("#panel").stop();
   });
  });
  </script>
 

 HTML-koodaus, body-elementtiin:
 
  <button id="stop"> Pysäytä </button>

  <div id="flip"> Näytä </div>
  <div id="panel">
  Avautumisen voi keskeyttää Pysäytä toiminto-painikkeella.<br><br>  
  Klikkaamalla uudelleen Näytä-painiketta voit jatkaa tämän viestin avautumista.</div>
  
  
  CSS-ohjeet, style-elementtiin:
  
  #panel, #flip {
   padding: 5px;
   font-size: 18px;
   text-align: center;
   background-color: DarkSlateGray;
   color: white;
   border: solid 1px #666;
   border-radius: 3px;
  }
  #panel {
   padding: 50px;
   display: none;
  }
  #stop {
   display: inline-block;
   padding: 15px 25px;
   font-size: 12px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   outline: none;
   color: #fff;
   background-color: RED;
   border: none;
   border-radius: 15px;
   box-shadow: 10px 10px 5px #666;
   margin-bottom: 20px;
  }
  #stop:hover {background-color: tomato}
  #stop:active {
   background-color: darkred;
   box-shadow: 3px 3px 5px #666;
   transform: translateY(4px);
   color: tomato;
  }

Ilmoitus tapahtumasta - callback

Jonkin tapahtuneen suorittamisesta voidaan näyttää www-sivulle ilmoitus, esim alert-funktiolla. Funktio alert on selainten oma ilmoitus, on myös mahdollista näyttää ilmoitus omalla div-elementillä toteutettuna.

Esimerkissä käytettävän metodin syntaksi, esim:

$(valitsin).hide(tunniste,funktio);

Esimerkissä Poista teksti-painikkeella poistetaan p-elementin teksti ja näytetään selaimen alert-funktiolla ilmoitus tapahtumasta.

Esimerkin koodaukset:


 JQuery, head-elementissä script-elementin sisällä:
 
  $(document).ready(function(){
   $("#stop").click(function(){
     $("p").hide("slow", function(){
      alert("Piilotit www-sivulla olleen tekstin !");
     });
   });
  });
 

 HTML-koodaus, body-elementtiin:
 
  <button id="stop"> Poista teksti </button>

  <p> Teksti piiloon ja ilmoitus kun teksti on poissa. </p>
  
  
  CSS-ohjeet, style-elementtiin:
  
  #stop {
   display: inline-block;
   padding: 10px 15px;
   font-size: 12px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   outline: none;
   color: #fff;
   background-color: RED;
   border: none;
   border-radius: 5px;
   box-shadow: 10px 10px 5px #666;
   margin-bottom: 20px;
  }
  #stop:hover {background-color: tomato}
  #stop:active {
   background-color: darkred;
   box-shadow: 3px 3px 5px #666;
   transform: translateY(4px);
   color: tomato;
  }

Ketjutus

Ketjuttaminen tarkoittaa usean muutoksen eli tapahtuman tapahtumista peräkkäin.

Periaate, esim:

$("valitsin").funktio1().funktio1().funktio3()

Esimerkissä Klikkaa-painikkeella painikkeen alla oleva teksti menee piiloon ja esille sekä vaihtaa väriään.

Esimerkin koodaukset:


 JQuery, head-elementissä script-elementin sisällä:
 
  $(document).ready(function(){
   $("button").click(function(){
    $("#p1").slideUp(2000).css("color", "red").slideDown(2000);
   });
  });
 

 HTML-koodaus, body-elementtiin:
 
  <button id="stop"> Klikkaa </button>

  <p id="p1">Vaihdetaan väriä, mennään piiloon ja esille.</p>
  <p> Ketjussa tapahtuva tapahtumien sarja. </p>
  
  
  CSS-ohjeet, style-elementtiin:
  
  #stop {
   display: inline-block;
   padding: 10px 15px;
   font-size: 12px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   outline: none;
   color: #fff;
   background-color: RED;
   border: none;
   border-radius: 5px;
   box-shadow: 10px 10px 5px #666;
   margin-bottom: 20px;
  }
  #stop:hover {background-color: tomato}
  #stop:active {
   background-color: darkred;
   box-shadow: 3px 3px 5px #666;
   transform: translateY(4px);
   color: tomato;
  }

clearQueue() - keskeytys

Keskeytys voi pysäyttää esimerkiksi animaatio-tapahtuman.

Metodin syntaksi:

$(valitsin).clearQueue();

Esimerkissä, Käynnistä-painikkeella käynnistetään animaatio, Stop !-painike pysäyttää ja Käynnistä-painike jatkaa animaatiota.

Koodaus, head-elementissä script-linkki sama kuin edellisessä. Valitsimien nimet voi keksiä itse #start ja #stop sekä ne ovat liitettty button-painikkeisiin id-tunnuksilla. Animaatio-tapahtuma on liitetty class-tunnisteella .laatikko jota käytetään CSS-ohjeen liittämisessä:


 JQuery, head-elementissä script-elementin sisällä:
 
 $(document).ready(function(){
  $("#start").click(function(){
   $(".laatikko").animate({height: 200}, 1500);
   $(".laatikko").animate({width: 200}, 1500);
   $(".laatikko").animate({height: 65}, 1500);
   $(".laatikko").animate({width: 100}, 1500);
  });
  $("#stop").click(function(){
   $(".laatikko").clearQueue();
  });
 });
 

 HTML & CSS koodaus body-elementissä (CSS-ohjeet samat kuin animate()-esimerkissä):
 
 <button id="start" class="painike"> Käynnistä </button>
 <button id="stop" class="painike"> Stop !</button>
  
 <div class="laatikko vari2"> Käynnistä, pysäytä Stop ja Käynnistä uudelleen. </div>

delay() - viive

Viive tarkoittaa hidastettua tapahtumaa, esim kuinka kauan animaatio-tapahtuma kestää.

Metodin syntaksi:

$(valitsin).delay(aika,queueName);

Esimerkissä, Käynnistä-painikkeella käynnistetään animaatio, Stop !-painike pysäyttää ja Käynnistä-painike jatkaa animaatiota.

Koodaus, head-elementissä script-linkki sama kuin edellisessä. Valitsimien nimet voi keksiä itse #start ja #stop sekä ne ovat liitettty button-painikkeisiin id-tunnuksilla. Animaatio-tapahtuma on liitetty class-tunnisteella .laatikko jota käytetään CSS-ohjeen liittämisessä:


 JQuery, head-elementissä script-elementin sisällä:
 
 $(document).ready(function(){
   $(".painike").click(function(){
      $("#d1").delay("fast").fadeIn();
      $("#d2").delay("slow").fadeIn();
      $("#d3").delay(2000).fadeIn();
   });
 });
 

 HTML-koodaus:
 
 <button class="painike"> Näytä tekstit</button>

 <div id="d1" class="gFontti"> Fast </div>
 <div id="d2" class="gFontti"> Slow </div>
 <div id="d3" class="gFontti"> 2000 (millisekunttia) </div>
 
  CSS-ohjeet:

   .painike {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 6px;
    cursor: pointer;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
   }
   .painike:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
   }
   .painike:active {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.24),0 7px 50px 0 rgba(0,0,0,0.19);
   }
   .gFontti{
    font-family: 'Island Moments', cursive;
    font-family: 'Moon Dance', cursive;
    color: slateblue;
	font-size: 24px;

	background: #FFD0C8;
    display: none;
	border: 1px solid black;
	width: 200px;
	height: 20px;
	margin: 4px;
	padding: 10px;
   }

dequeue() ja queue()

Metodeita dequeue() ja queue() käytetään yhdessä. Metodilla queue() luodaan joukko funktioita määritettyjä tehtäviä tekemään ja metodia dequeue() käytetään lopettamaan queue-funktio ja siitä poistumiseen.

Metodin dequeue() ja queue() syntaksi:

$(valitsin).queue(queueName);
$(valitsin).dequeue(queueName);

Esimerkissä animoidaan div-elementin muutoksia sekä vaihdetaan div-elementin tausta- ja fontinväri. Käytännössä ohjeet-nimiseen muuttujaan sijoitetaan div-elementin poksi-nimiset CSS-ohjeet ja valittuja ohjeita muutetaan animaatiossa.
Metodilla queue() luodaan queue-funktio jossa muutetaan div-elementin valittuja CSS-ohjeita. Metodilla dequeue() poistutaan queue-funktiosta.

Koodaus, metodissa muutetaan animoiden .poksi-muotoiluohjeita. Aluksi sijoitetaan .poksi-muotoiluohjeet ohjeet-nimiseen muuttujaan jonka jälkeen ne on muutettavissa ohjeet.animate() metodeilla.


 JQuery, head-elementissä script-elementin sisällä:
 
 $(document).ready(function(){
  $(".painike").click(function(){
   var ohjeet = $(".poksi");  
   ohjeet.animate({height: 100}, "slow");
   ohjeet.animate({width: 100}, "slow");
   ohjeet.queue(function(){
    ohjeet.css("background-color", "red");
    ohjeet.css("color", "white");
    ohjeet.dequeue();
   });
   ohjeet.animate({height: 50}, "slow");
   ohjeet.animate({width: 50}, "slow");
  });
 });
 

 HTML-koodaus:
 
 <button class="painike"> Näytä temppu </button>

 <div class="poksi">
  Kivaa..
 </div>
 
 
 Metodilla muutettavan poksihead-elementissä CSS-ohjeet (style-elementissä):
 
 .poksi{
    font-family: 'Island Moments', cursive;
    font-family: 'Moon Dance', cursive;
    color: slateblue;
	font-size: 24px;
	background: #FFD0C8;
	border: 1px solid black;
	width: 200px;
	height: 20px;
	margin: 4px;
	padding: 10px;
 }

Loppuun suoritus ja keskeytys - finish()

Metodi finish() pysäyttää parhaillaan käynnissä olevat animaatiot, poistaa kaikki jonossa olevat animaatiot ja suorittaa loppuun kaikki animaatiot valituille elementeille.

Metodin finish() syntaksi:

$(valitsin).finish();

Esimerkissä painikkeilla voi käynnistää animaation ja toisella painikkeella suoritetaan animaatio välittömästi loppuun.

Koodaus:


 JQuery, head-elementissä script-elementin sisällä:
 
 $(document).ready(function(){
  $("#start").click(function(){
    $("#poksi").animate({height: 300}, 3000);
    $("#poksi").animate({width: 300}, 3000);
  });
  $("#complete").click(function(){
    $("#poksi").finish();
  });
 });
 

 HTML-koodaus:
 
 <button id="start" class="painike"> Käynnistä animaatio</button>
 <button id="complete" class="painike"> Suorita loppuun </button>

 <div id="poksi"> <div>
 
 CSS-ohjeet:
 .painike {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 6px;
    cursor: pointer;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
 }
 .painike:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
 }
 .painike:active {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.24),0 7px 50px 0 rgba(0,0,0,0.19);
 }
 #poksi{
    background: RGB(206, 202, 232);
	border: 2px solid RGB(55,47,106);
	height: 60px;
	width: 60px;
 }

KESKEN MUOKKAA ESIMERKKI tai ESIMERKIT KUNTOON (alla)

Design and edit player