Metoden fadeToggle

Metoden fadeToggle växlar mjukt mellan att visa eller dölja element genom att animera deras opacitet.

Syntax

Visning/döljning under en given tid, 400ms som standard:

javascript.fadeToggle(varaktighet);

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:

javascript.fadeToggle('slow' eller 'fast');

Om parametrar inte anges - kommer ingen animation att ske, elementen kommer att visas/döljas omedelbart:

javascript.fadeToggle();

Man kan också som andra parameter skicka en easing-funktion, samt som tredje parameter en callback-funktion - som triggas efter att animationen är klar. Båda parametrarna är valfria:

javascript.fadeToggle(varaktighet, [easing-funktion], [callback-funktion]);

Man kan skicka metoden olika alternativ, i form av ett JavaScript-objekt som innehåller par av nyckel: värde:

javascript.fadeToggle(options);

Ett sådant objekt kan skicka följande parametrar och funktioner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivning av dessa parametrar kan du se för metoden animate. Till exempel, låt oss ställa in varaktighet och easing-funktion:

javascript.fadeToggle( {duration: 800, easing: easeInSine} );

Exempel

I följande exempel kommer elementet med #test att döljas vid första klick på knappen #toggle, och vid upprepade klick - visas. För detta använder vi metoden fadeToggle. Vi kommer också att ställa in hastigheten till 1000ms och värdet för easing-funktionen till linear:

html<button id="toggle">toggle</button>
<div id="test"></div>

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

javascript$('#toggle').on('click', function() {
  $('#test').fadeToggle(1000, 'linear');
});

Se även