Fungsi Bounce Pada Jquery UI (user interface) dan pembuatannya

Halo teman-teman, berjumpa lagi dengan saya di pembahasan tentang Jquery. Di artikel kemarin kita sudah belajar dengan menggunakan fungsi dari Jquery UI. Di artikel kali ini saya akan menggunakan Fungsi Bounce Pada Jquery UI (user interface). Yang berfungsi untuk menghilangkan content, baik kita langsung saja mempraktekkannya. Teman-teman siapkan code editornya lalu copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fungsi 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 pada code editornya, dan save dengan nama index.html. Setelah itu open to browser atau run maka akan mnghasilkan output seperti gambar di bawah ini.

Kemudian kita tambahkan fungsi bounce yang ada di Jquery UI, jangan lupa sebelum memberikan fungsi 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>

Jika sudah berikan fungsi bounce nya, teman-teman copy script di bawah ini dan pastekan di dalam tag <body>

<script>
  $( document ).click(function() {
    $( "#toggle" ).toggle( "bounce" );
  });
</script>

Teman-teman bisa lihat gambar di atas ini, save dan refreas pada browsernya, maka fungsi bounce sudah bisa di jalankan. Oia hampir lupa, untuk gambar teman-teman bebas ya apa saja yang paling penting diberikan id dan pemanggilannya harus sama. Atau juga bisa teman-teman tidak menggunakan gambar melainkan menggunakan css biasa setelah itu panggil id atau class nya di dalam fungsi Jquery nya. Oke mungkin sekian dulu di artikel kali ini tentang Fungsi Bounce Pada Jquery UI (user interface) mudah-mudahan bisa menjadi tambahan pengetahuan tentang Jquery UI nya. Sampai jumpa di artikel berikutnya dan Terimakasih 🙂

Semoga bermanfaat.

Baca juga artikel tentang Membuat Form Slide Animate dan SlideDown Jquery UI

Fungsi Bounce Pada Jquery UI (user interface)

Kategori