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