Penggunaan Fungsi Puff Effect Pada Jquery UI

Halo teman-teman, berjumpa lagi dengan saya. Pada artikel kemarin kita sudah belajar tentang penggunaan beberapa tag-tag pada HTML 5, nah di artikel kali ini kita akan belajar tentang Penggunaan Fungsi Puff Effect Pada Jquery UI. Dimana fungsi puff effect ini untuk menghilangkan suatu object ketika di klik dan menampilkan object ketika di klik ke 2 kalinya. Baik mari kita praktekkan, seperti biasa teman-teman siapkan code editornya dan copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>puff demo</title>
  <style>
  #kotak {
    width: 300px;
    height: 300px;
    margin: auto;
    background: orange;
  }
  </style>
</head>
<body>
 

<div id="kotak"></div>
 

</body>
</html>

Kemudian pastekan pada code editornya, dan save dengan nama index.html lalu buka pada browsernya. Maka akan tampil seperti gambar di bawah ini

Langkah berikutnya kita berikan fungsi puff effect nya, teman-teman jangan lupa sertakan atau berikan librari Jquery nya di dalam tag <head>. Bisa juga copy script di bawah ini

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/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.0/jquery-ui.js"></script>

Jika sudah tambahkan fungsi puff efect nya

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

Kemudian save dan refresh pada browsernya, dan klik pada kotak orange nya. Maka fungsi puff berhasil di praktekkan, mudah sekali bukan. Oke mungkin sekian dulu pada artikel kali ini tentang Penggunaan Fungsi Puff Effect Pada Jquery UI kita berjumpa lagi di artikel berikutnya. Semoga bermanfaat dan menjadi refrensi untuk teman-teman yang khususnya baru belajar tentang Jquery UI.

Baik sampai jumpa dan Terimakasih 🙂

Baca juga artikel tentang Menggabungkan CSS Linear Dan Radial Gradient.

Penggunaan Fungsi Puff Effect Pada Jquery UI

Kategori