Cara menggunakan javascript fade out
|
Belajar Jquery : Fungsi fadeIn, fadeOut, fadeTo jquery untuk transisi elemen
gema 9:48:00 AM Bahasa Indonesia , html , HTML amp; CSS , Javascript , jquery , Pemrograman , tutorial , web Show 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.
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 Apa perbedaan Fade In dan fadeOut?Apa itu fade in? Fade in artinya efek animasi yang semakin lama semakin muncul pada stage atau layar. Sementara fade out adalah efek animasi yang membuat tayangan semakin lama semakin mengecil bahkan hilang.
Apa fungsi fadeOut pada jQuery?Kalian dapat menggunakan metode jQuery fadeIn() dan fadeOut() untuk menampilkan atau menyembunyikan elemen HTML dengan secara bertahap menambah atau mengurangi opacitynya.
Apa perbedaan Fade In dan fadeOut jQuery?Oke Effect FadeIn itu sendiri berfungsi untuk memunculkan suatu element html dengan durasi tertentu, dan sebaliknya effect fadeOut adalah untuk menghilangkan suatuelement dengan durasi tertentu.
|
