Metoda fadeOut
Metoda fadeOut płynnie ukrywa
elementy. Pokazać elementy można za pomocą metody
fadeIn,
czyniąc je nieprzezroczystymi.
Składnia
Pokazanie w zadanym czasie,
400ms domyślnie:
.fadeOut(duration);
Czas można podawać nie tylko w milisekundach,
ale i słowami kluczowymi slow (600ms)
i fast (200ms), im większa wartość,
tym wolniejsza animacja:
.fadeOut('slow' lub 'fast');
Jeśli nie poda się parametrów - animacji nie będzie, elementy będą ukrywane natychmiast:
.fadeOut();
Można też drugim parametrem przekazać funkcję płynności, a także trzecim funkcję callback - zadziała po wykonaniu animacji. Oba parametry są opcjonalne:
.fadeOut(duration, [funkcja płynności], [funkcja callback]);
Można przekazać metodzie różne opcje, w postaci obiektu JavaScript, zawierającego pary klucz: wartość:
.fadeOut(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:
.fadeOut( {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 na przycisk #show - pokazywany, za
pomocą fadeIn. Również ustawimy
prędkość na 1000ms:
<button id="hide">ukryj</button>
<button id="show">pokaż</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 przy pokazywaniu elementu #test my
wyświetlimy wiadomość
z tekstem '!', a przy ukrywaniu
z tekstem '?':
<button id="hide">ukryj</button>
<button id="show">pokaż</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('?');
});
});
