Menggunakan Fungsi Transfer Effect Pada Jquery UI

Hallo teman-teman semua, apa kabar …?? Berjumpa lagi dengan saya, pada kesempatan kali ini saya akan memberitahu tentang Effect yang ada pada Jquery yaitu Menggunakan Fungsi Transfer Effect Pada Jquery UI. Pada demo yang akan kita buat nanti adalah mengirim Effect dari dua class/id yang bisa mengirimkan Effect pada saat di klik, efek yang dikirimkan berupa border. Oke langsung saja kita praktekkan, teman-teman siapkan code editornya lalu copy kan script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transfer Effects</title>
<style>
  div.green {
    width: 300px;
    height: 200px;
    background: green;
    border: 1px solid black;
    position: relative;
  }
  div.red {
    margin-top: 10px;
    width: 500px;
    height: 300px;
    background: red;
    border: 1px solid black;
    position: relative;
  }
  .ui-effects-transfer {
    border: 1px dotted black;
  }
  </style>
 </head>
<body>
 <center>
  <div class="green"></div>
  <div class="red"></div>
 </center>
</body>
</html>

Dan pastekan di code editornya, kemudian save dengan nama index.html lalu open to browse atau run pada browsernya. Maka hasilnya seperti gambar di bawah ini

Langkah berikutnya kita berikan fungsi tranfer effeck nya, sebelum itu teman-teman jangan lupa memberikan library Jquery dan Jquery UI nya ya di dalam tag <head>. Atau juga bisa 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 mari kita berikan fungsi transfer effeck nya, tambahkan script di bawah ini di bawah class/id nya

<script>
$( "div" ).click(function() {
  var i = 1 - $( "div" ).index( this );
  $( this ).effect( "transfer", { to: $( "div" ).eq( i ) }, 1000 );
});
</script>

Save dan refreas pada browsernya, Fungsi Transfer Effect sudah berhasil di buat. Maka jika di klik pada kotak warna hijau atau merah effeck akan di transfer di masing-masing class nya satu sama lain. Effeck yang ditranfer yaitu

Sangat mudah ya teman-teman, baik artikel tentang Menggunakan Fungsi Transfer Effect Pada Jquery UI sekian dulu. Kita jumpa lagi di artikel berikutnya, mudah-mudahan bisa menjadi tambahan inspirasi untuk teman-teman yang sangat menyukai effeck – effeck yang ada pada Jquery maupun Jquery UI. Dan jangan lupa teman-teman memodifikasinya sendiri ya supaya lebih mahir dalam menggunakan Effeck Jquery nya. Oke terima kasih dan semoga bermanfaat.

Baca juga artikel tentang Fitur Column Ordering Pada Bootstrap

Menggunakan Fungsi Transfer Effect Pada Jquery UI

Kategori