Metoden fadeOut

Metoden fadeOut döljer element mjukt. Visa element kan man med metoden fadeIn, genom att göra dem ogenomskinliga.

Syntax

Visning under given tid, 400ms som standard:

javascript.fadeOut(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.fadeOut('slow' eller 'fast');

Om man inte anger parametrar - kommer ingen animation att ske, elementen kommer att döljas omedelbart:

javascript.fadeOut();

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

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

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

javascript.fadeOut(options);

Sådan ett 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.fadeOut( {duration: 800, easing: easeInSine} );

Exempel

I följande exempel när man klickar på knappen #hide kommer elementet med #test att döljas med metoden fadeOut, och på knappen #show - visas, med fadeIn. Vi sätter också hastigheten till 1000ms:

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').fadeIn(1000);
});

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

Exempel

Och i följande exempel efter avslutad animation vid visning av elementet #test kommer vi att skriva ut ett meddelande med texten '!', och vid döljande med texten '?':

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').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Se även