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

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

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

5 comments :

  1. Hello! I’ve been reading your web site for a while now and finally got the courage to go ahead and give you a shout out from Kingwood Texas! Just wanted to say keep up the good work! new york web designs

    ReplyDelete
  2. You must participate in a contest for probably the greatest blogs on the web. I will recommend this web site! website designers nyc

    ReplyDelete
  3. Its good as your other content : D, appreciate it for posting . san francisco design agency

    ReplyDelete
  4. I truly prize your piece of work, Great post. branding agency san francisco

    ReplyDelete