Metoda fadeTo

Metoda fadeTo gladko spreminja prosojnost elementa na dano vrednost, v območju od 0 do 1.

Sintaksa

Trajanje in prosojnost sta določeni pri kateri koli različici uporabe metode. Spreminjanje prosojnosti v določenem času, 400ms privzeto:

javascript.fadeTo(trajanje, vrednost prosojnosti);

Čas lahko določimo ne le v milisekundah, ampak tudi s ključnimi besedami slow (600ms) in fast (200ms), večja kot je vrednost, počasnejša je animacija:

javascript.fadeTo('slow' ali 'fast', vrednost prosojnosti);

Kot tretji (neobvezni) parameter lahko podamo callback-funkcijo - izvede se po zaključku animacije:

javascript.fadeTo(trajanje, vrednost prosojnosti, [callback-funkcija]);

Lahko podamo tudi funkcijo zaubljanja in callback-funkcijo (neobvezna parametra) - izvede se po zaključku animacije:

javascript.fadeTo(trajanje, vrednost prosojnosti, [funkcija zaubljanja], [callback-funkcija]);

Primer

V naslednjem primeru bomo z metodo fadeTo ob pritisku na gumb #hide element z #test skrili z zmanjševanjem prosojnosti na 0.5, ob pritisku na #show pa ga prikazali:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
  $('#test').fadeTo(1000, 0.5);
});

Glejte tudi