Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI

Halo teman – teman semuanya, selamat datang kembali pada tips dan trik Dumet School. Jumpa kembali dengan saya dalam artikel tips dan trik kali ini, di artikel sebelumnya kita sudah belajar beberapa fungsi dari jQuery UI. Dan pada kesempatan kali ini kita juga akan belajar tentang Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI dimana fungsi ini masih masuk dalam kategori effect yaitu Highlight dan fade.

fade yang berarti luntur, dalam fungsi jQeury UI ini fade menghasilkan berkedip hilang dan muncul pada saat di klik
Highlight yang dalam bahasa Indonesia menyoroti dan hasil dari fungsi ini di dalam jQuery UI adalah berkedip clip dan ada warna pada saat perpindahan clip nya.

Baik, sekarang kita implementasikan Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI teman – teman siapkan text editornya dan copy script html nya di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI </title>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
</body>
</html>

Lalu masukkan css nya

<style>
 #toggle {
 width: 100px;
 height: 100px;
 background: #ccc;
 }
 </style>

Kemudian save dengan nama index.html, langkah berikutnya kita berikan script jQuery nya. Sebelumnya kita load terlebih dahulu library jQuery dan jQuery UI nya

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

Dan masukkan script jQuery UI degan fungsi fade

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

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

Kemudian teman – teman klik, maka jika berhasil hasilnya kotak akan berkedip hilang dan muncul jika di klik, kemudian kita ganti dengan Highlight teman – teman ketikkan seperti di bawah ini

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

Jika sudah save dan refresh pada browsernya, lalu teman – teman klik pada kotak maka hasilnya berkedip clip dan ada warna pada saat perpindahan clip nya. Bagaimana..?? Simple dan mudah bukan dan juga hasilnya cukup menarik, baik saya rasa sekian dulu pada artikel kali ini tentang Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI kita berjumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat dan menjadi tambahan pengetahuan tentang fungsi – fungsi jQuery UI nya.

Terimkasih dan sampai jumpa.

Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI

Kategori