Fungsi Bounce Pada Jquery UI (user interface)
Halo teman-teman, berjumpa lagi dengan saya di pembahasan mengenai Jquery. Di artikel kemarin kita telah belajar dengan menggunakan manfaat dari Jquery UI. Di artikel kali ini saya akan menggunakan Fungsi Bounce Pada Jquery UI (user interface). Yang berfungsi bagi menghilangkan content, bagus kita seketika saja mempraktekkannya. Teman-teman siapkan code editornya lalu copy script di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Kegunaan Bounce Jquery UI</title>
<style>
#toggle {width: 100px; height: 100px; position: relative; top: 500px; left: 142px;}}
.content{background:orange; margin:auto; width: 400px; height: 600px}
</style>
</head>
<body>
<div class=content>
<img id=toggle src=rocket.png>
</div>
</body>
</html>
Kemudian pastekan di code editornya, dan save dengan nama index.html. Setelah itu open to browser atau run karenanya akan mnghasilkan output seperti gambar di bawah ini.
Kemudian kita tambahkan manfaat bounce yang terdapat di Jquery UI, jangan lupa sebelum memberikan manfaat bounce nya. Berikan library Jquery dan Jquery UI nya terlebih dahulu didalam tag <head>
<link rel=stylesheet href=http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css>
<script src=http://code.jquery.com/jquery-1.12.4.js></script>
<script src=http://code.jquery.com/ui/1.12.1/jquery-ui.js></script>
Kalau telah berikan manfaat bounce nya, teman-teman copy script di bawah ini dan pastekan di pada tag <body>
<script>
$( document ).click(function() {
$( #toggle ).toggle( bounce );
});
</script>
Teman-teman dapat lihat gambar di atas ini, save dan refreas di browsernya, karenanya manfaat bounce telah dapat di jalankan. Oia hampir lupa, bagi gambar teman-teman bebas ya apa saja yang sangat urgen diberikan id dan pemanggilannya mesti sama. Atau pun dapat teman-teman tak menggunakan gambar melainkan menggunakan css lazimnya setelah itu panggil id atau class nya di pada manfaat Jquery nya. Oke mungkin demikianlah dulu di artikel kali ini mengenai Fungsi Bounce Pada Jquery UI (user interface) mudah-mudahan dapat menjadi tambahan pengetahuan mengenai Jquery UI nya. Hingga jumpa di artikel berikutnya dan Terimakasih 🙂
Semoga bermanfaat.
Baca pun artikel mengenai Membuat Form Slide Animate dan SlideDown Jquery UI
Sumber https://kursuswebsite.org
