Mengenal Fungsi Effect dan Explode Effect jQuery UI

Halo teman – teman, selamat datang pada website tips dan trik Dumet School. Kembali lagi dengan saya pada pengenalan fungsi – fungsi jQuery, pada kesempatan kali ini kita akan belajar Mengenal Fungsi Effect dan Explode Effect jQuery UI dimana fungsi ini dapat menciptakan effect, untuk kategory fungsi effect sendiri memiliki lingkup diantaranya ada fungsi .show(), hide() dan .toggle() ketiga fungsi ini bisa dikatakan ada dalam kategori effect. Dan effect sendiri juga mempunyai hasil, nah berikutnya explode effect kita bisa gunakan juga di dalamnya.

Baik, langkah selanjutnya kita akan implementasikan Mengenal Fungsi Effect dan Explode Effect jQuery UI seperti biasa teman – teman siapkan text editornya. Dan copy script html seperti di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><strong>Mengenal Fungsi Effect dan Explode Effect jQuery UI</strong></title>
</head>
<body>
<button>Klik</button>
<div></div> 
</body>
</html>

Dan save dengan nama index.html, langkah berikutnya kita tambahkan library nya terlebih dahulu

<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>

Kemudian masukkan css nya

<style><br> div {<br> width: 100px;<br> height: 100px;<br> background: #ccc;<br> border: 1px solid #000;<br> }<br> </style>

Baru kita masukkan script jQuery UI nya

<script><br>$( "button" ).click(function() {<br> $( "div" ).effect( "bounce", "slow");<br>});<br></script>

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Kemudian teman – teman klik pada button, maka hasilnya adalah kotak akan bergetar ke atas dan ke bawah yang di hasilkan oleh bounce kemudian kita gunakan explode effect

<script>
$( "button" ).click(function() {
 $( "div" ).effect( "explode");
});
</script>

Jika sudah save dan refresh pada browser nya, lalu teman – teman klik pada button, maka hasilnya kotak akan memudar dengan pecahan kotak yang di hasil dari fungsi explode effect. Inilah praktek singkat dengan studi case yang sederhana, teman – teman bisa juga di explor lagi jQuery UI nya supaya lebih terbiasa dalam menggunakan fungsi – fungsi jQuery UI. Baik saya rasa sekian dulu pada artikel kali ini tentang Mengenal Fungsi Effect dan Explode Effect jQuery UI kita berjumpa kembali di tips dan trik yang akan datang. Terimakasih dan sampai jumpa.

Mengenal Fungsi Effect dan Explode Effect jQuery UI

Kategori