gema 9:48:00 AM Bahasa Indonesia , html , HTML amp; CSS , Javascript , jquery , Pemrograman , tutorial , web
Pada artikel kali ini kita akan membahas tentang efek fadeIn, fadeOut dan fadeTo pada jquery. Fungsi efek ini biasanya digunakan untuk transisi elemen pada web, baik muncul maupun lenyap secara berkala[memudar].Seperti artikel tentang animate sebelumnya, kita menggunakan file contoh yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web.
Bagi yang belum tahu cara dasar menggunakan jquery, monggo simak link diatas. ;]
Ok, cekidot, langsung to de poin.
Fungsi efek fadeIn dan fadeOut mempunyai struktur yang sama yaitu:
[code lang="javascript"]$[elemen].fadeOut[durasi];[/code]
dimana elemen adalah elemen yang dipanggil, sedangkan durasi adalah waktu yang diperlukan bagi elemen untuk menghilang[fadeOut] atau tampil[fadeIn] dalam milidetik.
Untuk langsung mencobanya, silahkan edit file html yang tadi saya bahas. Ubah script html-nya jadi:
[code lang="javascript"]$['#kotak'].fadeOut[1000];[/code]
Simpan dan refresh untuk lihat hasilnya, kalau tidak ada masalah, maka seharusnya #kotak secara bertahap memudar hingga menghilang. Sekarang coba tambahkan .fadeIn[1000] setelah fungsi fadeOut, hingga menjadi:
[code lang="javascript"]$['#kotak'].fadeOut[1000].fadeIn[1000];[/code]
Dan lihat hasilnya. :]
Tidak ada masalah? kalau tidak terjadi apa-apa, cek disini solusinya. ;]
Ok, sekarang kita lanjut ke fungsi fadeTo.
Agak berbeda dari kedua fungsi sebelumnya, fungsi fadeTo mempunyai 2 properties yaitu durasi dan opacity. Sehingga bentuknya kayak gini:
[code lang="javascript"]$[elemen].fadeTo[durasi,opacity];[/code]
Contoh terapan:
[code lang="javascript"]$['#kotak'].fadeTo[1000 , 0.5];[/code]
Nah, nilai dari opacity adalah antara 0 sampai 1, dimana semakin kearah 0, objek semakin menghilang, semakin kearah 1 objek semakin jelas [0=full transparan, 1=tidak transparan].
Misalnya dalam contoh diatas, opacity bernilai 0,5 yang artinya object setengah menghilang setengah nampak[transparan]. Untuk lebih jelasnya, coba terapkan ke file html contoh kita tadi. ;]
Sekian artikel tentang fungsi fadeIn, fadeOut, dan fadeTo jquery, untuk artikel tentang fungsi-fungsi jquery lainnya bisa agan temukan di submenu jquery di menu programming.
Selamat belajar. :] dan jangan lupa +1 ;]
P.S:Copas silahkan, tapi jangan lupa cantumkan sumber. ;]
Newer Post Older Post
Keunggulan dari JQuery yakni adanya efek animasi seperti fade in dan fade out yang bisa kita gunakan. Seperti pada power point, efek fade in dan fade out pun ada di JQuery. Cukup mudah untuk menggunakan fungsi fade in dan fade out.
untuk menggunakan efek fade in
$["selector"].fadeIn[3000];
untuk menggunakan
efek fade out
$["selector"].fadeOut[3000];
contoh penggunaannya
- Fade In & Fade Out
- $[document].ready[function[]{
- $["#isi"].hide[];
- $["#fadein"].click[function[]{
- $["#isi"].fadeIn[5000];
- }];
- $["#fadeout"].click[function[]{
- $["#isi"].fadeOut[3000];
- }];
- }];
- Isi yang akan ditampilkan
Hasil jadi dari code diatas seperti berikut
ketika diklik fade in,text akan perlahan muncul
ketika di klik fade out akan perlahan menghilang
Untuk penjelasan mengenai fungsi hide ada di artikel berikut
show hide
diatas ada angka 3000, itu merupakan micro second yang artinya 1000 = 1 detik , jadi 3000 = 3 detik
happy coding