Hallo teman-teman Dumet School, bertemu lagi dengan saya Shelli Ripati di kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Efek Pada Objek Menggunakan Fungsi Fold Jquery UI. Efek fold yang ada pada Jquery UI memberikan efek pada suatu objek dengan animasi menghilang dimulai dari arah bawah ke atas lalu kanan ke kiri dan jika muncul arah sebaliknya. Jika saya gambarkan efeknya teman-teman bisa lihat seperti gambar yang ada di bawah ini.
Untuk dapat mengetahui cara Membuat Efek Pada Objek Menggunakan Fungsi Fold Jquery UI kita langsung saja membuat struktur htmlnya terlebih dahulu ya teman-teman. Teman-teman bisa salin script yang ada di bawah ini.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Membuat Efek Pada Objek Menggunakan Fungsi Fold Jquery UI</title>
<style>
#toggle {
background:salmon;
width: 500px;
height:300px;
}
</style>
</head>
<body>
<h1>Membuat Efek Pada Objek Menggunakan Fungsi Fold Jquery UI </h1>
<p>Klik dimana aja untuk efek toggle fold</p>
<div id="toggle">
</div>
</body>
</html>
Lalu teman-teman jangan lupa tambahkan link jquery ui dan jquerynya seperti link di bawah ini. Teman-teman bisa letakkan di dalam head. Dan kebetulan disini untuk jquery UInya saya download.
<link rel="stylesheet" href="../jquery-ui-1.12.1/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="../jquery-ui-1.12.1/jquery-ui.js"></script>
Lalu langkah terakhir untuk dapat Membuat Efek Pada Objek Menggunakan Fungsi Fold Jquery UI adalah script jquerynya. Teman-teman bisa salin scriptnya seperti yang ada di bawah ini.
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( " Fold" );
});
</script>
Jika teman-teman perhatikan di sini saya membuat fungsi klik didalam htmlnya dimana jika kita melakukan klik maka div dengan nama id toggle akan akan menghilang atau muncul dengan efek Fold.
Jika teman-teman simpan lalu teman-teman jalankan di browser masing-masing maka div id dengan nama toggle akan menghilang atau muncul kembali dengan efek Fold yaitu efek leter T seperti yang sudah saya gambarkan di atas.
Demikian artikel tentang cara Membuat Efek Pada Objek Menggunakan Fungsi Fold Jquery UI. Semoga artikel ini dapat bermanfaat dan menambah wawasan baru. Buat teman-teman yang penasaran, bisa langsung di coba. Sampai jumpa di pembahasan berikutnya.