Masih berhubungan dengan menampilkan dan menghilangkan sebuah konten ya teman-teman, dengna jquery effects kita bisa menghilangkan dan menampilkan sebuha konten dimana sutu event di kerjakan, misalkan disini saya akan membuat sebuah tombol button dimana ketika tombil button menampilkan di pilih akan menampilkan sebuah kontenya, dan dimana ketika sebuah konten menghilangkan dipilih maka konten tersebut pun akan menghilang, oke sesaat lagi kita akan coba ya untuk menampilkan dan menghilangkan konten dengan jquery effects, simak terus ya teman-teman.
untuk menampilkan dan menghilangkan konten dengan jquery effects, yang saya butuhkan pada jquery effects adalah
- fadeIn untuk menampilkan dan
- fadeOut untuk menghilangkan,
Dan ketika kita tampilkan punya kita bisa memberikan sebuah effect dimana ada “slow”, “fast”, dan waktu persekian mili detik, 1000 = 1 detik, saya mengambil contoh dari sebuah salah satu website favorite saya yaitu w3school untuk pembelajaran pembuatan website. seperti itu ya teman-teman, oke langsung saja ya kita coba membuatnya:
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html> <head> <title>Menampilkan dan menghilangkan Konten dengan Jquery Effect</title> <style type="text/css"> #div1{ width:100px; height:100px; display:none; background-color:red; margin-bottom: 20px; } #div2{ width:100px; height:100px; display:none; background-color:yellow; margin-bottom: 20px; } #div3{ width:100px; height:100px; display:none; background-color:green; margin-bottom: 20px; } .container{ width: 800px; margin:auto; } button#id1{ background: red; padding: 5px; border-radius: 5px; border: 1px solid blue; } button#id2{ background: blue; color: #fff; padding: 5px; border-radius: 5px; border: 1px solid red; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#id2").hide(); $("button#id1").click(function(){ $(this).hide(); $("#id2").show(); $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn("fast"); }); $("button#id2").click(function(){ $(this).hide(); $("#id1").show(); $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(1000); }); }); </script> </head> <body> <div class="container"> <h1>Menampilkan dan menghilangkan Konten dengan Jquery Effect</h1> <button id="id1">Click Untuk Menampilkan</button> <button id="id2">Click Untuk Menghilangkan</button><br><br> <div id="div1" ></div> <div id="div2" ></div> <div id="div3" ></div> </div> </body> </html> |
Oke jika teman-teman perhatikan saya membuat tiga kotak, ada warna merah, kuning, biru. jadi kode di atas akan menimbulkan effect seperti ini:
- Pada pertama kali halaman dibuka, yang akan tampil adalah, sebuah judul dan tombol menampilkan,
- ketika tombol menampilkan di klik, akan muncul kotak 3 yang tadi kita buat di bawahnya, lalu tombol yang untuk memunculkan tadi akan berubah menjadi tombol menghilangkan,
- ketika tombol menghilangkan di klik, konten tersebut akan hilang secara smooth atau perlahan, tergantung kita memberikannya apa.
- lalu bagaimana hasilnya seperti ini ya:
gambar awal sebelum di klik
dan sesuah di klik, seharusnya jika teman-teman coba, walaupun dia mempunyai efek menghilangkan dan menampilkan, tetapi menghilang dan tampil seperti perlahan-lahan dan enak untuk di lihat ya teman-teman, Oke saya rasa cukup samapai disini dulu belajar kita tentang menampilkan dan menghilangkan konten dengan jquery effects, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.