Metoden fadeTo

Metoden fadeTo ändrar mjukt opaciteten för ett element till ett angivet värde, i intervallet från 0 till 1.

Syntax

Varaktighet och opacitet anges i alla användningsfall för metoden. Ändring av opacitet under en given tid, 400ms som standard:

.fadeTo(varaktighet, opacitetsvärde);

Tiden kan anges inte bara i millisekunder, utan också med nyckelorden slow (600ms) och fast (200ms), ju högre värde, desto långsammare animation:

.fadeTo('slow' eller 'fast', opacitetsvärde);

Man kan också som en tredje (valfri) parameter skicka en callback-funktion - utlöses efter att animationen är klar:

.fadeTo(varaktighet, opacitetsvärde, [callback-funktion]);

Man kan också skicka en easing-funktion och en callback-funktion (valfria parametrar) - utlöses efter att animationen är klar:

.fadeTo(varaktighet, opacitetsvärde, [easing-funktion], [callback-funktion]);

Exempel

I följande exempel, med hjälp av metoden fadeTo vid klick på knappen #hide kommer elementet med #test att döljas genom att minska opaciteten till 0.5, och vid klick på #show - att visas:

<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 även

metoden fadeToggle,
som ändrar opaciteten för element
metoden fadeIn,
som mjukt visar dolda element, gör dem ogenomskinliga
metoden animate,
som animerar egenskaper för element