Metoden fadeIn

Metoden fadeIn viser skjulte elementer jevnt, og gjør dem ugjennomsiktige. Skjul elementer kan du med metoden fadeOut, ved å gjøre dem gjennomsiktige.

Syntaks

Visning over en gitt varighet, 400ms som standard:

javascript.fadeIn(varighet);

Varighet kan angis ikke bare i millisekunder, men også med nøkkelordene slow (600ms) og fast (200ms), jo høyere verdi, jo tregere animasjon:

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

Hvis du ikke angir parametere - vil animasjonen ikke skje, elementer vil vises øyeblikkelig:

javascript.fadeIn();

Du kan også som andre parameter sende en easing-funksjon, og som tredje en callback-funksjon - som utløses etter at animasjonen er fullført. Begge parameterne er valgfrie:

javascript.fadeIn(varighet, [easing-funksjon], [callback-funksjon]);

Du kan sende metoden ulike alternativer, i form av et JavaScript-objekt som inneholder par nøkkel: verdi:

javascript.fadeIn(alternativer);

Et slikt objekt kan sende følgende parametere og funksjoner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivelse av disse parameterne kan du se for metoden animate. For eksempel, la oss sette varighet og easing-funksjon:

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

Eksempel

I følgende eksempel, når du klikker på knappen #hide vil elementet med #test skjules ved hjelp av metoden fadeOut, og på knappen #show - vises, med hjelp av fadeIn. Vi setter også hastigheten til 1000ms:

html<button id="hide">skjul</button>
<button id="show">vis</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 følgende eksempel, etter at animasjonen er fullført ved visning av elementet #test, vil vi vise en melding med teksten '!', og ved skjuling med teksten '?':

html<button id="hide">skjul</button>
<button id="show">vis</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å