logo

INTERNETNE STORITVE

- IZDELAVA SPLETNIH STRANI - OBLIKOVANJE - PROGRAMIRANJE DODATKOV

« Postati registrator domen?
Javascript - document.getElementsByTagName »

Javascript - fade efekt - jQuery - fadeIn - fadeOut - setTimeout - removeChild

Podobno kot pri scrolling funkcionalnosti, kjer sem z malo truda dobil superiorno funkcionalnost s pomočjo jQuery-a, sem tudi za fade efekt uporabil jQuery. Cilj je bil, da se po določenem času poljubno sporočilo zamenja z drugo vsebino.

Imamo dve tabeli, prva tabela je aktivna (vidna) ko obiskovalec odpre spletno stran, druga tabela pa postane aktivna po določenem času in zamenja prvo tabelo, ki nato postane nevidna. jQuery ima že vgrajen plugin fadeIn ter fadeOut. Uporaba:

PLAIN TEXT
JAVASCRIPT:
  1. $("#HTMLObjektID").fadeIn("slow");
  2. $("#HTMLObjektID").fadeOut("slow");

Več o argumentih in ostale možnosti uporabe. Kot že rečeno sta fadeIn ter fadeOut že del knjižnice in je zato potrebno za uporabe teh funkcij dodati le jQuery knjižnico:

PLAIN TEXT
JAVASCRIPT:
  1. <script src="jquery.js" type="text/javascript" language="javascript"></script>

Poglejmo si še naš primer:

PLAIN TEXT
HTML:
  1. <table id="infoMessage">Tabela, ki je aktivna na začetku</table>
  2. <table id="allInformations" style="display: none;">Tabela, ki bo aktivna po treh sekundah</table>

Javascript koda, ki bo izvedla zamenjavo (fadeIn ter fadeOut efekt):

PLAIN TEXT
JAVASCRIPT:
  1. setTimeout("fadeOutInfoMessage();", 3000);
  2. setTimeout("fadeInAllInformations();", 3200);
  3.  
  4. function fadeOutInfoMessage() {
  5.     $("#infoMessage").fadeOut("slow");
  6.     var infoMessage = document.getElementById('infoMessage');
  7.     infoMessage.parentNode.removeChild(infoMessage);
  8. }
  9.  
  10. function fadeInAllInformations() {
  11.     $("#allInformations").fadeIn("slow");
  12. }

Uporabili smo setTimeout, ki po določenem času (v milisekundah) pokliče oz. izvede poljubno Javascript funkcijo oz. kodo. Pri našem primeru najprej skrijemo prvo (trenutno aktivno) tabelo ter jo izbrišemo iz DOM-a, saj se drugače pri bolj kompleksnem CSS-u pojavi nekakšen preskok in ne izgleda lepo. Ko preteč 0.2 sekunde se izvede še drug del kode, ki drugo tabelo nastavi kot aktivno.

Preizkusite delovanje zgoraj opisanega primera.

Dodatne informacije:

Delodajalec: Pangaea.si

Roky || Ponedeljek, maj 5th, 2008 ob 11:16 dopoldne || Splet, Splet (Javascript, Ajax) || RSS 2.0 | Dodaj komentar || Trackback

1 komentar na “Javascript - fade efekt - jQuery - fadeIn - fadeOut - setTimeout - removeChild”

  1. Javascript predogled slike - CSS opacity - picture preview - picture fade | .: TRSplet - internetne storitve .: je napisal:
    maj 9th, 2008 ob 12:05 dopoldne

    [...] Javascript - fade efekt - jQuery - fadeIn - fadeOut - setTimeout - removeChild [...]

Dodaj komentar