Membuat Fade Toogle dengan jQuery | HTML
recudo.com - Hay guys.. Jumpa lagi nih dengan recudo. Gimana nih kabar kalian?. Semoga baik-baik saja yah. Disini admin akan memberikan tutorial tentang HTML "Membuat Fade Toogle pada HTML". Langsung aja nih admin akan memberikannya secara singkat.
Langkahnya:
1. Buka aplikasi dreamweaver, lalu pilih HTML, dan akan tampil gambar di bawah ini.
2. Lalu masukkan koding seperti ini.
<html>
<head>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle(500);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(2000);
});
});
</script>
</head>
<body>
<p><b>Cara Membuat Fade Toogle pada jQuery</p>
<button>Fade In/Out</button><br><br>
<div id="div1" style="width:100px;height:100px;background-color:red;"></div>
<br>
<div id="div2" style="width:100px;height:100px;background-color:blue;"></div>
<br>
<div id="div3" style="width:100px;height:100px;background-color:pink;"></div>
</body>
</html>
3. Setelah itu, simpan dengan ekstensi *html
4. Setelah itu buka file yang telah kalian simpan, lalu jalan kan.
5. Okey, selesai.
Terima kasih untuk kalian yang telah mengunjungi artikel ini, semoga dapat bermanfaat dan semoga membantu kalian dalam mengerjakan tugas kalian.
Dan tetap nantikan artikel menarik dari recudo yah.
EmoticonEmoticon