Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini saya akan sharing tentang bagaimana cara membuat efek fadein dan fadeout sederhana dengan jquery. Fadein dan fadeout pada dasarnya sama seperti show dan hide pada jquery, yang berfungsi untuk menampilkan dan menyembunykan element html yang ada pada browser, untuk lebih jelasnya kita langsung saja praktek,
pertama-taman teman-teman silahkan buat sebuah file dan ketikan script berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!doctypeHTML> <html> <head> <title>belajareventfadeto</title> <script
src="//code.jquery.com/jquery-3.1.1.min.js"type="text/javascript"> </script> </head> <body> <button id="in">fade in</button>
<button id="out">fadeout</button> <h2>HalosayaFahrizal</h2> <script type="text/javascript">
$(document).ready(function(e){ $("#out").click(function(){
$("h2").fadeOut("slow"); }); $("#in").click(function(){
$("h2").fadeIn("slow"); }); }); </script> </body> </html>
Saya membuat 2 buah tombol yang saya berikan id in dan out, lalu saya membuat fungsi seperti ini pada jquerynya :
<script type="text/javascript"> $(document).ready(function(e){ $("#out").click(function(){ $("h2").fadeOut("slow"); }); $("#in").click(function(){ $("h2").fadeIn("slow"); }); }); </script> |
Dimana saya memberikan efek fade in dan fade out slow pada masing-masing idnya, dan yang terpenting jangan lupa teman-teman mereload liblary dari jquerynya, seperti script ini :
<script src="//code.jquery.com/jquery-3.1.1.min.js"type="text/javascript"> |
Diletakan di dalam tag head yang diambil dari jquery.com, jika sudah teman-teman save dan lihat hasilnya,
Hasilnya tulisan h2 adan menghilang dan tampil ketikan tombol kita klik,
Gimana teman-teman? cukup mudah bukan? oke untuk tutorial kali ini tentang membuat efek fadein dan fadeout sederhana dengan jquery cukup sampai disini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya, sampai bertemu pada tutorial berikutnya,
Terimakasih.