Programming, tutorials, mechatronics, operating systems, and other tech stuff

Belajar Jquery : Fungsi fadeIn, fadeOut, fadeTo jquery untuk transisi elemen

No comments
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).

Screenshot from 2015-04-22 14:25:04

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. ;)

No comments :

Post a Comment