Membuat Efek Show dan Hide jQuery
Assalamualaikum wr.wb
Pagi Kawan, pada hari ini Saya akan Sharing tentang Membuat Efek Show dan Hide jQuery
A. Pengertian
Efek show adalah efek memunculkan sebuah element HTML secara perlahan, sedangkan Efek hide kebalikan dari show, yakni menyembunyikan sebuah element HTML dengan perlahan. Untuk membuat kedua efek ini kita bisa menggunakan method show() dan hide() jQuery.
B. Latar Belakang
Selain efek-efek dasar JavaScript, seperti menambahkan Elemen atau memanipulasi kode CSS, jQuery juga menyediakan berbagai efek visual menarik lainnya. Kali ini kita akan membahas Cara Membuat Efek Show dan Hide elemen HTML dengan jQuery.
C. Maksud dan Tujuan
Membuat Efek Show dan Hide jQuery.
D. Alat dan Bahan
- Komputer / Laptop
- Text Editor
- JQuery.js
E. Langkah - langkah
1. Membuat Struktur folder seperti berikut!
2. Membuat file " index.html atau index.php " dengan script dibawah ini!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Show dan Hide</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>Membuat Efek Show dan Hide dengan jQuery</h2>
<button id="tombol_hide">Hide</button>
<button id="tombol_show">Show</button>
<br><br>
<div id="box"></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
3. Membuat file " style.css " di folder " css " dengan script dibawah ini!
#box {
width: 300px;
height: 80px;
background-color: aqua;
border: 5px solid black;
}
4. Membuat file " index.js " di folder " js " dengan script dibawah ini! $(document).ready(function() {
$("#tombol_hide").click(function() {
$("#box").hide(1000);
})
$("#tombol_show").click(function() {
$("#box").show(1000);
})
});
5. Kalau sudah jadi, silahkan jalankan index.html.
F. Referensi
F. Referensi
G. Hasil dan Kesimpulan
Sekarang, efek hide dan show berjalan dengan lebih pelan. Dapat juga anda perhatikan bahwa efek hide() ini dijalankan dengan cara menyembunyikan element HTML ke sudut kiri atas.
Yak, itu tadi penjelasan singkat tentang Membuat Efek Show dan Hide JQuery, jangan lupa untuk kunjungi terus blog saya untuk mengetahui kelanjutan materi ini Sekian Termiakasih.
Wassalamualaikum wr.wb