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:
.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:
.fadeIn('slow' lub 'fast');
Jeśli nie podasz parametrów - animacja nie wystąpi, elementy będą pokazywane natychmiast:
.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:
.fadeIn(duration, [funkcja płynności], [funkcja callback]);
Można przekazać metodzie różne opcje, w postaci obiektu JavaScript, zawierającego pary klucz: wartość:
.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:
.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:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#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 '?':
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
