Metoda fadeOut
Metoda fadeOut postopno skrije
elemente. Prikazati elemente je mogoče z metodo
fadeIn,
tako da jih naredi neprosojne.
Sintaksa
Prikaz v določenem času,
400ms privzeto:
.fadeOut(trajanje);
Čas je mogoče nastaviti ne le v milisekundah,
ampak tudi s ključnimi besedami slow (600ms)
in fast (200ms), večja kot je vrednost,
počasnejša je animacija:
.fadeOut('slow' ali 'fast');
Če parametri niso določeni - animacije ne bo, elementi bodo skriti takoj:
.fadeOut();
Kot drugi parameter je mogoče posredovati tudi funkcijo zaubljanja, in kot tretji parameter callback funkcijo - se izvede po zaključku animacije. Oba parametra sta neobvezna:
.fadeOut(trajanje, [funkcija zaubljanja], [callback-funkcija]);
Metodi je mogoče posredovati različne možnosti, v obliki JavaScript objekta, ki vsebuje pare ključ: vrednost:
.fadeOut(možnosti);
Tak objekt lahko posreduje naslednje
parametre in funkcije - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Opis
teh parametrov si lahko ogledate za metodo
animate. Na primer,
nastavimo trajanje in funkcijo zaubljanja:
.fadeOut( {duration: 800, easing: easeInSine} );
Primer
V naslednjem primeru ob kliku na gumb
#hide bo element z #test
skrit z uporabo metode fadeOut,
ob kliku na gumb #show pa bo prikazan, z
uporabo fadeIn. Prav tako bomo nastavili
hitrost 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);
});
Primer
V naslednjem primeru bomo po koncu
animacije pri prikazu elementa #test
izpisali sporočilo
z besedilom '!', ob skrivanju
pa z besedilom '?':
<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('?');
});
});
