Metoden fadeOut

Metoden fadeOut skjuler elementer gradvist. Vis elementer med metoden fadeIn, som gør dem uigennemsigtige.

Syntaks

Visning over en angivet varighed, 400ms som standard:

javascript.fadeOut(varighed);

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

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

Hvis parametre ikke angives - vil der ikke være animation, elementer skjules øjeblikkeligt:

javascript.fadeOut();

Man kan også sende en easing-funktion som anden parameter, samt en callback-funktion som tredje parameter - som udføres efter animationen er afsluttet. Begge parametre er valgfrie:

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

Man kan sende metoden forskellige indstillinger, i form af et JavaScript-objekt, der indeholder par nøgle: værdi:

javascript.fadeOut(indstillinger);

Et sådant objekt kan sende følgende parametre og funktioner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivelse af disse parametre kan du se for metoden animate. For eksempel, lad os sætte varigheden og easing-funktionen:

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

Eksempel

I det følgende eksempel, når der klikkes på knappen #hide, vil elementet med #test blive skjult ved hjælp af metoden fadeOut, og på knappen #show - blive vist, med fadeIn. Vi sætter også hastigheden til 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);
});

Eksempel

Og i det følgende eksempel, efter afslutningen af animationen ved visning af elementet #test, vil vi vise en besked med teksten '!', og ved skjuling med teksten '?':

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 også