Metode fadeOut
Metode fadeOut menyembunyikan
elemen secara halus. Menampilkan elemen dapat dilakukan dengan metode
fadeIn,
dengan membuatnya tidak transparan.
Sintaks
Menampilkan dalam waktu yang ditentukan,
400ms secara default:
.fadeOut(durasi);
Waktu tidak hanya dapat ditentukan dalam milidetik,
tetapi juga dengan kata kunci slow (600ms)
dan fast (200ms), semakin besar nilainya,
semakin lambat animasinya:
.fadeOut('slow' atau 'fast');
Jika parameter tidak ditentukan - tidak akan ada animasi, elemen akan disembunyikan secara instan:
.fadeOut();
Juga dapat meneruskan fungsi easing sebagai parameter kedua, dan callback function sebagai parameter ketiga - akan dijalankan setelah animasi selesai. Kedua parameter bersifat opsional:
.fadeOut(durasi, [fungsi easing], [callback function]);
Dapat meneruskan berbagai opsi ke metode, dalam bentuk objek JavaScript, yang berisi pasangan kunci: nilai:
.fadeOut(options);
Objek seperti itu dapat meneruskan parameter
dan fungsi berikut - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Deskripsi
parameter ini dapat Anda lihat untuk metode
animate. Contohnya,
mari kita atur durasi dan fungsi easing:
.fadeOut( {duration: 800, easing: easeInSine} );
Contoh
Pada contoh berikut, ketika tombol
#hide ditekan, elemen dengan #test akan
disembunyikan menggunakan metode fadeOut,
dan pada tombol #show - akan ditampilkan, dengan
menggunakan fadeIn. Kami juga akan mengatur
kecepatan menjadi 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);
});
Contoh
Dan pada contoh berikut, setelah
animasi selesai saat menampilkan elemen #test, kami
akan menampilkan pesan
dengan teks '!', dan saat menyembunyikan
dengan teks '?':
<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('?');
});
});
