Halo, ketemu lagi dengan saya 🙂 , kali ini saya akan bagikan kalian tutorial sederhana tentang Cara Show Dan Hide Gambar Dengan jQuery, bagi kalian yang lagi belajar jQuery kalian harus tau cara menggunakan Show dan Hide gambar, berikut ini langkah-langkah nya.
Silahkan kalian buat dulu kode HTML seperti berikut.
|
1 2 3 4 |
<button id="hideBtn">Hide image</button> <button id="showBtn">Show image</button> <div id="box"></div> |
Nah, pada kode id box, kalian bisa menggunakan gambar, kebetulan diatas saya menggunakan background, setelah itu saya buat CSS untuk background nya seperti berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
button { width: 160px; padding: 5px 10px; text-transform: uppercase; margin: 5px 0; } #box { width: 324px; height: 200px; background: orange; opacity: 1; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; } |
Oke, kalo sudah barulah kita buat fungsi Show dan Hide dengan kode jQuery berikut ini.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('#hideBtn').click(function() { $('#box').hide('slow'); }); $('#showBtn').click(function() { $('#box').show('slow'); }); }); |
Kalo sudah semua, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai
Cukup mudah bukan ? baik sampai disini tutorial mengenai Cara Show Dan Hide Gambar Dengan jQuery, semoga bermanfaat, amin.
Selamat mencoba 🙂