T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« Postati registrator domen?
Javascript – document.getElementsByTagName »
5th May

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

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript predogled slike – CSS opacity – picture preview – picture fade
  2. Javascript – scrolling – jQuery.scrollTo – jQuery.SerialScroll
  3. Javascript koledar – izbira datuma – jQuery date picker
  4. jQuery – traversing – dodatki – javascript frameworks
  5. jQuery each snippet
  6. Tablesorter – jQuery plugin Tablesorter 2.0 – šumniki – nepravilno sortiranje šumnikov čšž – javascript sortiranje tabel
  7. Javascript – avtomatsko osveževanje strani – refresh page – reload page
  8. Stalno osveževanje del spletne vsebine – ajax jquery.get – javascript setinterval
  9. Spreminanje input type text v input type password – Javascript
  10. PHP & Javascript asociativna tabela (Associative array)

Roky || Monday, May 5th, 2008 ob 11:16 am || 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:
    May 9th, 2008 ob 12:05 am

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

Dodaj komentar