Menggunakan Fungsi Highlight Effect Pada Jquery UI

Halo teman-teman apa kabar semuanya..?!? Tentunya sehat selalu ya, Pada artikel kali ini kita akan belajar Menggunakan Fungsi Highlight Effect Pada Jquery UI dimana ketika di klik maka kotak akan melakukan slow hideen dan slow show mirip dengan hover pada css. Dengan menggunakan fungsi Highlight kita sudah mempunyai sebuah hover yang atraktif, oke mari kita mulai. Teman-teman siapkan code editornya lalu copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Highlight</title>
  <style>
  *{margin:0; padding:0}
  body{background:gray}
  .kotak{width: 500px; height: 300px; background: orange; margin:auto; margin-top:30px}
  </style>
</head>
<body>

<div class="kotak"></div>
 
</body>
</html>

Lalu pastekan script di atas ini pada code editornya, kemudian save dengan nama index.html dan buka pada browsernya. Maka akan menghasilkan output seperti gambar di bawah ini

Langkah berikutnya kita berikan fungsi Highlight nya, teman-teman jangan lupa sertakan library Jquery dan Jquery UI nya didalam tag <head> atau 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 teman-teman tambahkan fungsi Highlight nya, ketikkan sama persis gambar di bawah ini tepat di bawah tag <div>

Kemudian save dan refreas pada browsernya, nah fungsi Highlight sudah berhasil dibut. Maka jika di klik kotak akan melakukan slow hidden dan ketika di klik lagi akan melakukan slow show. Sangat mudah bukan, baik mungkin cukup sekian dulu di artikel tentang Menggunakan Fungsi Highlight Effect Pada Jquery UI sampai jumpa di artikel berikutnya. Semoga bermanfaat dan Terimakasih.

Indahnya berbagi 🙂

Menggunakan Fungsi Highlight Effect Pada Jquery UI

Kategori