Metoda fadeIn
Metoda fadeIn postopno prikaže skrite
elemente, tako da postanejo neprozorni. Skriti
elemente je mogoče z metodo
fadeOut,
tako da postanejo prozorni.
Sintaksa
Prikaz v določenem času,
400ms privzeto:
.fadeIn(trajanje);
Čas je mogoče določiti 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:
.fadeIn('slow' ali 'fast');
Če parametri niso določeni - animacije ne bo, elementi bodo prikazani takoj:
.fadeIn();
Kot drugi parameter je mogoče posredovati tudi funkcijo zaubljanja, in kot tretji parameter callback funkcijo - se izvede po končani animaciji. Oba parametra sta neobvezna:
.fadeIn(trajanje, [funkcija zaubljanja], [callback-funkcija]);
Metodi je mogoče posredovati različne možnosti, v obliki JavaScript objekta, ki vsebuje pare ključ: vrednost:
.fadeIn(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:
.fadeIn( {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">skrij</button>
<button id="show">prikaži</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">skrij</button>
<button id="show">prikaži</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('?');
});
});
