Metoden fadeTo

Metoden fadeTo ændrer jævnt gennemsigtigheden af et element til en given værdi, i området fra 0 til 1.

Syntaks

Varighed og gennemsigtighed angives ved enhver brug af metoden. Ændring af gennemsigtigheden over en given tid, 400ms som standard:

.fadeTo(varighed, gennemsigtighedsværdi);

Tiden kan angives ikke kun i millisekunder, men også med nøgleordene slow (600ms) og fast (200ms), jo højere værdi, jo langsommere animation:

.fadeTo('slow' eller 'fast', gennemsigtighedsværdi);

Man kan også som tredje (valgfri) parameter overføre en callback-funktion - udføres efter animationen er afsluttet:

.fadeTo(varighed, gennemsigtighedsværdi, [callback-funktion]);

Man kan også overføre easing-funktion og callback-funktion (valgfrie parametre) - udføres efter animationen er afsluttet:

.fadeTo(varighed, gennemsigtighedsværdi, [easing-funktion], [callback-funktion]);

Eksempel

I følgende eksempel, ved hjælp af metoden fadeTo ved at klikke på knappen #hide vil elementet med #test blive skjult ved at reducere gennemsigtigheden til 0.5, og ved #show - vises:

<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);
});

Se også

metoden fadeToggle,
som ændrer elementers gennemsigtighed
metoden fadeIn,
som jævnt viser skjulte elementer, gør dem uigennemsigtige
metoden animate,
som animerer elementers egenskaber