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:

.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:

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

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

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

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

.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:

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

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

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

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

Glejte tudi

metoda fadeToggle,
ki spreminja prosojnost elementov
metoda fadeIn,
ki gladko prikaže skrite elemente, jih naredi neprosojne
metoda animate,
ki animira lastnosti elementov