Metoda fadeIn

Metoda fadeIn płynnie pokazuje ukryte elementy, czyniąc je nieprzezroczystymi. Ukryć elementy można za pomocą metody fadeOut, czyniąc je przezroczystymi.

Składnia

Pokazanie w zadanym czasie, 400ms domyślnie:

javascript.fadeIn(duration);

Czas można podawać nie tylko w milisekundach, ale także słowami kluczowymi slow (600ms) i fast (200ms), im większa wartość, tym wolniejsza animacja:

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

Jeśli nie podasz parametrów - animacja nie wystąpi, elementy będą pokazywane natychmiast:

javascript.fadeIn();

Można także drugim parametrem przekazać funkcję płynności, a także trzecim funkcję callback - wykona się po zakończeniu animacji. Oba parametry są opcjonalne:

javascript.fadeIn(duration, [funkcja płynności], [funkcja callback]);

Można przekazać metodzie różne opcje, w postaci obiektu JavaScript, zawierającego pary klucz: wartość:

javascript.fadeIn(options);

Taki obiekt może przekazywać następujące parametry i funkcje - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Opis tych parametrów możesz zobaczyć dla metody animate. Na przykład, ustawmy czas trwania i funkcję płynności:

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

Przykład

W następnym przykładzie po naciśnięciu przycisku #hide element z #test będzie ukrywany za pomocą metody fadeOut, a po naciśnięciu przycisku #show - pokazywany, za pomocą fadeIn. Ustalmy także prędkość na 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);
});

Przykład

A w następnym przykładzie po zakończeniu animacji podczas pokazywania elementu #test wyświetlimy komunikat z tekstem '!', a podczas ukrywania z tekstem '?':

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('?');
  });
});

Zobacz też