Belajar jQuery‎ > ‎

07. Efek Visual dengan jQuery

posted Nov 28, 2011 4:08 AM by Editor KursusInternet   [ updated Dec 31, 2011 8:27 AM ]

Pendahuluan

Interaksi yang semakin dimudahkan oleh web browser modern dengan dukungan library seperti jQuery tentunya membuat tuntutan penggunaan aplikasi yang friendly semakin tinggi.

Salah satu aspek friendly tersebut adalah penggunaan efek visual yang dapat membantu pengguna semakin nyaman dengan pengalaman menggunakan aplikasi atau untuk penekanan terhadap informasi tertentu.

jQuery juga memiliki function yang dapat memberikan beberapa efek visual seperti pergeseran (sliding), menghilang (hiding), meledak (explode), dan lain-lain.

jQuery UI

Untuk menghasilkan visual efek yang telah disebutkan di atas maka jQuery mengembangkan library tambahan di atas library standar, yaitu jQuery UI. Library tersebut perlu didownload secara terpisah dari http://jqueryui.com/download.

Pada halaman tersebut, Anda dapat memilih opsi efek yang diinginkan pada bagian "Effects".


Fungsi-fungsi dasar animasi yang dapat digunakan dengan opsi visual efek adalah sebagai berikut :
  • show( duration, callback) : digunakan untuk menampilkan elemen berdasarkan selector.
  • hide( duration, callback) : digunakan untuk menyembunyikan elemen berdasarkan selector.
  • toggle( duration, callback) : digunakan untuk menyembunyikan elemen berdasarkan selector.
Parameter yang digunakan adalah duration ( durasi waktu animasi ) dan callback ( fungsi yang akan dieksekusi setelah animasi selesai dilakukan).

Dengan visual efek, opsi efek teks yang dapat ditambahkan menjadi :
  • show( opsi_efek, duration, callback) 
  • hide( opsi_efek, duration, callback)
  • toggle( opsi_efek, duration, callback)
Pilihan opsi_efek yang dapat digunakan untuk ketiga function tersebut :
  • Blind - Menghilangkan.
  • Clip - Klip.
  • Drop - Drop.
  • Explode - "Meledakkan" elemen.
  • Fade - Melunturkan.
  • Fold - Melipat.
  • Puff - Mengepul.
  • Slide - Meluncur.
  • Scale - Membesar.
Dan beberapa function yang berdiri sendiri :
  • Bounce - Melambung horizontal / vertikal.
  • Highlight - Tersorot.
  • Pulsate - Berdenyut.
  • Shake - Menggoncang.
  • Size - Merubah ukuran.
  • Transfer - Peralihan.

Contoh Penggunaan

efek_visual.html

<html> <head> <title>Efek Visual</title> <script src="jquery-1.7.min.js"></script> <script src="jquery-ui-1.8.16.custom.min.js"></script> <style type="text/css"> #container {     width: 200px;     height: 200px;     background: orange;     border: 1px solid black;     position: relative; } </style>     <script>     $(document).ready(function() {         $("#hide").click(function () {             $("#container").hide($("#efek").val(), 1000);         });         $("#show").click(function () {             $("#container").show($("#efek").val(), 1000);         });         $("#toggle").click(function () {             $("#container").toggle($("#efek").val(), 1000);         });     });     </script> </head> <body>     <div> Efek :     <select id="efek">         <option value="blind">Blind</option>         <option value="clip">Clip</option>         <option value="drop">Drop</option>         <option value="explode">Explode</option>         <option value="fade">Fade</option>         <option value="fold">Fold</option>         <option value="puff">Puff</option>         <option value="slide">Slide</option>         <option value="scale">Scale</option>     </select>     </div><br />     <div id="container"></div> <br />     <button id="show">Show</button>&nbsp;<button id="hide">Hide</button>&nbsp;<button id="toggle">Toggle</button> </body> </html>

Video Hasil Eksekusi 


Sumber Referensi