Kaedah fadeIn
Kaedah fadeIn memaparkan elemen tersembunyi
dengan lancar, menjadikannya legap. Menyembunyikan
elemen boleh dilakukan dengan kaedah
fadeOut,
dengan menjadikannya lutsinar.
Sintaks
Paparan untuk tempoh masa yang ditentukan,
400ms secara lalai:
.fadeIn(tempoh);
Masa boleh ditetapkan bukan hanya dalam milisaat,
tetapi juga dengan kata kunci slow (600ms)
dan fast (200ms), semakin besar nilai,
semakin perlahan animasi:
.fadeIn('slow' atau 'fast');
Jika parameter tidak dinyatakan - animasi tidak akan berlaku, elemen akan dipaparkan serta-merta:
.fadeIn();
Anda juga boleh menghantar fungsi kelancaran sebagai parameter kedua, dan fungsi callback ketiga - akan berfungsi selepas selesai animasi. Kedua-dua parameter adalah pilihan:
.fadeIn(tempoh, [fungsi kelancaran], [fungsi callback]);
Anda boleh menghantar pelbagai pilihan kepada kaedah, dalam bentuk objek JavaScript, yang mengandungi pasangan kunci: nilai:
.fadeIn(pilihan);
Objek sedemikian boleh menghantar berikut
parameter dan fungsi - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Penerangan
parameter ini anda boleh lihat untuk kaedah
animate. Sebagai contoh,
mari kita tetapkan tempoh dan fungsi kelancaran:
.fadeIn( {duration: 800, easing: easeInSine} );
Contoh
Dalam contoh berikut, apabila butang
#hide ditekan, elemen dengan
#test akan
disembunyikan menggunakan kaedah fadeOut,
dan pada butang #show - dipaparkan, dengan
menggunakan fadeIn. Kami juga akan menetapkan
kelajuan kepada 1000ms:
<button id="hide">sembunyi</button>
<button id="show">tunjuk</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);
});
Contoh
Dan dalam contoh berikut, selepas selesai
animasi apabila memaparkan elemen #test, kami
akan memaparkan mesej
dengan teks '!', dan apabila menyembunyikan
dengan teks '?':
<button id="hide">sembunyi</button>
<button id="show">tunjuk</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('?');
});
});
