Kaedah fadeOut
Kaedah fadeOut menyembunyikan
elemen secara beransur-ansur. Elemen boleh dipaparkan menggunakan kaedah
fadeIn,
dengan menjadikannya tidak lutsinar.
Sintaks
Paparan untuk tempoh masa yang ditetapkan,
400ms secara lalai:
.fadeOut(tempoh);
Masa boleh ditetapkan bukan hanya dalam milisaat,
tetapi juga dengan kata kunci slow (600ms)
dan fast (200ms), semakin besar nilai,
semakin perlahan animasi:
.fadeOut('slow' atau 'fast');
Jika parameter tidak dinyatakan - animasi tidak akan berlaku, elemen akan disembunyikan serta-merta:
.fadeOut();
Anda juga boleh menghantar fungsi pelancaran sebagai parameter kedua, dan fungsi panggil balik ketiga - akan berfungsi selepas selesai animasi. Kedua-dua parameter adalah pilihan:
.fadeOut(tempoh, [fungsi pelancaran], [fungsi panggil balik]);
Anda boleh menghantar pelbagai pilihan kepada kaedah, dalam bentuk objek JavaScript, yang mengandungi pasangan kunci: nilai:
.fadeOut(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 pelancaran:
.fadeOut( {duration: 800, easing: easeInSine} );
Contoh
Dalam contoh berikut, apabila butang ditekan
#hide 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">papar</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 tamat
animasi apabila memaparkan elemen #test kami
akan memaparkan mesej
dengan teks '!', dan apabila menyembunyikan
dengan teks '?':
<button id="hide">sembunyi</button>
<button id="show">papar</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('?');
});
});
