Salah satu alasan menggunakan jQuery adalah mudahnya membuat animasi. Sebelum CSS3 membawa fitur animasi, jQuery adalah pilihan pertama untuk menghasilkan animasi ke dalam web

Membuat Efek Show dan Hide jQuery

Efek show adalah efek memunculkan sebuah element HTML secara perlahan, sedangkan efek hide kebalikan dari show, yakni menyembunyikan sebuah element HTML dengan perlahan. Untuk membuat kedua efek ini bisa menggunakan method show() dan hide() jQuery.

Contoh kedua method ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol_hide").click(function() {
       $("#box").hide();
     })
  
     $("#tombol_show").click(function() {
       $("#box").show();
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery </h2>
<button id="tombol_hide">Hide</button>
<button id="tombol_show">Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

Disini memiliki sebuah box <div id=”box”> yang sudah dihiasi dengan CSS. Ketika tombol Hide di klik, akan dijalankan perintah: $(“#box”).hide(). Akibatnya, kotak pink hilang, ketika tombol Show di klik, perintah $(“#box”).show() akan mengembalikan lagi kotak tersebut.

Silahkan dicoba sendiri dari link codepen dibawah ini:

jQuery juga mengizinkan untuk mengatur kecepatan animasi efek show() dan hide(). Caranya dengan menambahkan salah satu keyword: “slow” atau “fast” sebagai argumen method ini, seperti contoh berikut:

$("#box").hide("slow");

Untuk pengaturan yang lebih detail, bisa menginput angka dalam satuan milisecond, seperti:

$("#box").hide(1000);

Ini artinya efek hide akan membutuhkan waktu 1 detik (1000 milisecond) untuk selesai. Berikut contoh perubahannya pada kode program sebelumnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol_hide").click(function() {
       $("#box").hide(1000);
     })
  
     $("#tombol_show").click(function() {
       $("#box").show(1000);
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery </h2>
<button id="tombol_hide">Hide</button>
<button id="tombol_show">Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

Sekarang, efek hide dan show berjalan dengan lebih pelan.

Dapat juga diperhatikan bahwa efek hide() ini dijalankan dengan cara menyembunyikan element HTML ke sudut kiri atas.

Method toggle() jQuery

Selain method hide() dan show(), jQuery masih memiliki method toggle() yang berfungsi sebagai gabungan efek hide dan show. Method ini akan menyembunyikan (hide) element HTML jika saat ini sedang muncul, atau memunculkan (show) element tersebut jika saat ini tersembunyi.

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       $("#box").toggle("slow");
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery </h2>
<button id="tombol">Hide/Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

Jika diklik tombol Hide/Show, kotak box akan bergantian dari hide ke show dan sebaliknya.

Membuat Efek Fade dengan jQuery

Efek FadeIn dan FadeOut dengan jQuery

Efek fade sebenarnya mirip dengan efek show dan hide, akan tetapi kali ini element HTML akan disembunyikan dengan mengubah transparasi-nya, yakni dari normal menjadi transparan (tersembunyi), dan sebaliknya.

Untuk membuat efek fade, menggunakan 2 buah method, yakni fadeIn() untuk menghadirkan sebuah elemen, dan fadeOut() untuk menyembunyikan sebuah elemen.

Sama seperti method hide() dan show(), kedua method fade ini juga bisa diatur kecepatannya menggunakan keyword “slow”, “fast” atau angka dalam satuan milisecond.

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol_fade_out").click(function() {
       $("#box").fadeOut("slow");
     })
  
     $("#tombol_fade_in").click(function() {
       $("#box").fadeIn("fast");
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery </h2>
  <button id="tombol_fade_out">FadeOut</button>
  <button id="tombol_fade_in">FadeIn</button>
<br><br>
  <div id="box"></div>
</body>
</html>

Ketika tombol FadeOut di-klik, perintah jQuery $(“#box”).fadeOut(“slow”) akan dijalankan. Hasilnya, box pink akan berubah secara perlahan menjadi transparan, lalu hilang sepenuhnya. Gunakan argumen “slow” agar efek fadeOut berjalan dengan perlahan.

Ketika tombol FadeIn di-klik, akan dijalankan kode jQuery $(“#box”).fadeIn(“fast”). Sekarang, box pink akan kembali tampil dengan cepat. Ini karena ditambahkan argument “fast” untuk method fadeIn().

Silahkan dicoba dari link codepen dibawah ini:

Method fadeToggle() jQuery

Sebagai gabungan dari method fadeIn() dan fadeOut(), jQuery menyediakan method fadeToggle(). Sama seperti efek “toggle”, fungsi dari fadeToggle() adalah secara bergantian memunculkan dan menyembunyikan element HTML, tergantung kondisi element saat ini.

Berikut contoh penggunaan method fadeToggle() jQuery:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       $("#box").fadeToggle(1000);
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery </h2>
<button id="tombol">FadeIn/FadeOut</button>
<br><br>
<div id="box"></div>
</body>

Ketika tombol FadeIn/FadeOut di-klik, kotak pink akan bergantian muncul dan sembunyi berselang efek selama 1000 milisecond. Ini sesuai dengan perintah $(“#box”).fadeToggle(1000).

Membuat Efek Slide dengan jQuery

Efek slide adalah efek kemunculan sebuah elemen HTML dengan cara turun dari atas kebawah. Untuk membuat efek ini, jQuery menyediakan 2 buah method: slideUp() dan slideDown().

Seperti yang bisa ditebak, method slideUp() digunakan untuk menyembunyikan element (naik ke atas), sedangkan method slideDown() digunakan untuk memunculkan element (turun ke bawah), tentunya dengan efek sliding.

Untuk mengontrol kecepatan efek, bisa menggunakan keyword “slow”, “fast”, atau angka sebagai argumen method ini (dalam satuan milisecond).

Berikut contoh penggunaan efek slide di dalam jQuery:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol_slide_up").click(function() {
       $("#box").slideUp("slow");
     })
  
     $("#tombol_slide_down").click(function() {
       $("#box").slideDown("fast");
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery </h2>
<button id="tombol_slide_up">SlideUp</button>
<button id="tombol_slide_down">SlideDown</button>
<br><br>
<div id="box"></div>
</body>
</html>

Contoh kali ini masih sama seperti contoh yang digunakan dalam tutorial show dan fade sebelumnya, dimana memiliki sebuah box pink dan dengan 2 tombol: SlideUp dan SlideDown.

Ketika tombol SlideUp di klik, efek slideup akan dijalankan melalui perintah $(“#box”).slideUp(“slow”). Box pink akan ‘naik’ secara perlahan.

Ketika SlideDown di klik, edek slidedown akan menurunkan box pink dengan cepat. Ini dilakukan dari perintah $(“#box”).slideDown(“fast”).

bisa mencobanya melalui link codepen dibawah ini:

Method slideToggle() jQuery

Masih sama seperti efek jQuery sebelumnya, jQuery juga menyediakan method slideToggle() yang berfungsi sebagai gabungan dari method slideUp() dan slideDown(). Kedua efek ini akan dijalankan secara bergantian.

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() {
       $("#box").slideToggle("slow");
     })
  
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery </h2>
<button id="tombol">Slide!</button>
<br><br>
<div id="box"></div>
</body>

Pada saat tombol Slide! Di klik, perintah $(“#box”).slideToggle(“slow”) akan memeriksa status dari box saat ini. Jika sedang tampil, lakukan slideUp. Jika box sudah tidak ada, lakukan slideDown.

Membuat Efek Animasi dengan jQuery

Salah satu alasan populernya penggunaan jQuery adalah kemudahan dalam membuat berbagai efek menarik. jQuery sendiri memiliki plugin/library tambahan yang khusus menyediakan berbagai efek animasi, yakni jQuery UI.

Namun, library jQuery ‘standar’ tetap bisa digunakan untuk membuat efek animasi, yakni dengan menggunakan method animate(). Method animate() digunakan untuk membuat animasi antara 2 buah efek CSS. Fitur ini sangat mirip dengan efek animasi di CSS3.

Method animate() jQuery bisa diisi dengan berbagai property CSS yang ingin dibuat efek animasinya. Sebagai contoh, jika memiliki sebuah elemen HTML berikut:

<div id="box">

Untuk membuat efek animasi yang akan “memanjangkan” box diatas menjadi 500px, bisa menulis:

$( "#box" ).animate({ width: "500px" });

Perhatikan cara penulisan argumen untuk method animate() ini. Seluruh property CSS yang ingin dianimasikan harus berada di dalam tanda kurung kurawal { dan }.

Bagaimana jika ingin membuat 2 buah efek sekaligus, Caranya tambahkan property CSS kedua dengan dipisah tanda koma, seperti berikut:

$( "#box" ).animate({ width: "500px", height: "100px" });

Perintah diatas berarti ingin menganimasikan 2 efek, lebar (width) dan tinggi (height). Lihat penggunaannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $( "#tombol_animasi" ).click(function() {
       $( "#box" ).animate({
           width: "80%",
           height: "80px",
           opacity: 0.4
         });
     });
  
   });
   </script>
   <style>
     #box {
       width: 100px;
       height: 50px;
       background-color: silver;
       border: 2px solid black;
       padding: 0 10px;
     }
   </style>
</head>
<body>
  <h2>Belajar jQuery </h2>
  <button id="tombol_animasi">Animate!</button>
<br><br>
  <div id="box"></div>
</body>
</html>

Dalam kode diatas, memiliki sebuah tombol Animate! dan sebuah box <div id=”box”>. Box ini sudah di tambahkan kode CSS agar memiliki tinggi, lebar, border dan warna abu-abu (silver).

Ketika tombol Animate! Di klik, perintah yang akan dijalankan adalah sebagai berikut:

$( "#box" ).animate({
   width: "80%",
   height: "80px",
   opacity: 0.4
});

Artinya, efek animasi dilakukan untuk 3 property CSS: lebar (width), tinggi (height), dan transparansi (opacity). Silahkan dicoba langsung dari link codepen dibawah ini:

Yang perlu menjadi catatan, tidak semua property CSS bisa dianimasikan. Khusus untuk warna, tidak didukung secara bawaan. maka harus menggunakan plugin jQuery tambahan.

Untuk penulisan property CSS yang menggunakan tanda hubung ‘ – ’ harus dikonversi menjadi camelCase. Sebagai contoh, font-size harus diubah menjadi fontSize.

Mengatur Durasi Animasi jQuery

Method animate() bisa ditambahkan dengan argumen kedua untuk mengatur seberapa cepat sebuah efek berlangsung. Nilai yang bisa digunakan adalah keyword seperti “slow” dan “fast”, atau bisa juga berupa angka dalam satuan millisecond.

Berikut contoh animasi jQuery dengan pengaturan kecepatan:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $( "#tombol_animasi" ).click(function() {
  
       $( "#box" ).animate({
           width: "80%",
           height: "80px",
           opacity: 0.4
         }, "slow");
  
         $( "#paragraf" ).animate({
           fontSize: "40px",
         }, 3000);  
  
     });
  
   });
   </script>
   <style>
     #box {
       width: 100px;
       height: 50px;
       background-color: pink;
       border: 2px solid black;
     }
   </style>
</head>
<body>
  <h2>Belajar jQuery </h2>
  <button id="tombol_animasi">Animate!</button>
<br><br>
  <div id="box"></div>
  <p id="paragraf">Situs</p>
</body>
</html>

Kali ini menambahkan sebuah kata “Situs” yang akan dianimasikan dengan perintah:

$( "#paragraf" ).animate({
  fontSize: "40px",
}, 3000);

Artinya, ukuran font (font-size) akan diperbesar menjadi 40 pixel dalam waktu 3 detik (3000 milisecond). Silahkan mencoba berbagai efek lain dengan menukar property CSS yang ada.

Membuat Game Sederhana dengan jQuery

Membuat Game “Kotak” dengan jQuery

Game yang akan dibuat terbilang sangat sederhana agar kode programnya juga tidak kompleks:

Perlu juga diinformasikan, jQuery hanyalah sebuah “bantuan” ke dalam JavaScript. Untuk membuat kode program yang kompleks seperti game ini, tetap memerlukan JavaScript dasar.

Contoh ”Game Kotak”. Disini memiliki 9 kotak berwarna abu-abu. Objektif dari game ini adalah: Temukan kotak warna hijau dalam 3 kali klik:

Untuk mengulangi game, silahkan klik tombol “RERUN” di bagian kanan bawah. Atau jika menjalankannya di web browser, cukup refresh halaman. Posisi kotak hijau akan random (diacak), sehingga selalu berpindah-pindah.

Pertama, tentunya harus menyiapkan 9 ‘kotak’. Ini bisa dibuat dengan tag <div id=”box”></div>. Selanjutnya menggunakan event click pada setiap box agar ketika di klik, warnanya berubah, ini bisa dilakukan dengan method css() jQuery.

Untuk seluruh keterangan yang tampil, sdigunakan method html(). Misalnya memampilkan hasil counter (berapa banyak klik) dan hasil game, apakah itu “gameover” atau “you win!”.

Yang cukup susah adalah membuat aturan game-nya. Disini menggunakan perintah JavaScript dasar. Misalnya untuk menghasilkan angka acak, menggunakan method Math.random(). Ini adalah fungsi bawaan JavaScript untuk membuat angka acak.

Baik, berikut kode lengkap “Game Kotak”:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery </title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     // generate angka acak 1-9
     var angka = Math.floor((Math.random() * 9) + 1);
  
     // tambah awalan agar sesuai dengan id box, misal: box3
     var box_ajaib = "box"+angka;
  
     // siapkan variabel counter
     var jumlah_klik = 0;
     var ketemu = "belum";
  
     $("div").click(function() {
  
       // hitung jumlah klik    
       jumlah_klik++;
       $("#hitung").html("Jumlah Klik = "+jumlah_klik);
  
       // ubah warna background box
       if ($(this).attr("id")==box_ajaib) {
         $(this).css("background-color","green");
         ketemu = "sudah";
       }
       else {
         $(this).css("background-color","red");
       }
  
       // cek hasil game
       if ((ketemu=="sudah") && (jumlah_klik <= 3)) {
         $("#hasil").html("You Win!");
       }
       if ((ketemu=="belum") && (jumlah_klik >= 3)) {
         $("#hasil").html("Game Over... coba lagi gan!");
       }
  
     });
  
   });
   </script>
   <style>
     div {
       width: 70px;
       height: 70px;
       background-color: silver;
       border: 2px solid black;
       padding: 0 10px;
       float: left;
       margin: 5px;
       cursor: pointer;
     }
   </style>
</head>
<body>
<h2>Game "Kotak" </h2>
<p>Anda hanya punya 3 kali klik untuk menemukan kotak Hijau</p>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
   <br style="clear:both">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
   <br style="clear:both">
<div id="box7"></div>
<div id="box8"></div>
<div id="box9"></div>
   <br style="clear:both">
<h3 id="hitung"></h3>
<h1 id="hasil"></h1>
</body>
</html>

Kode JavaScript yang dibutuhkan sekitar 30-40 baris. Jika menghapus bagian komentar, totalnya hanya 20 baris kode program. Namun untuk dapat memahami kode program tersebut mesti memiliki pengetahuan tentang HTML, CSS, JavaScript, jQuery dan dasar-dasar programming seperti variabel dan kondisi if.

Kesembilan kotak <div> memiliki id dari box1, box2, hingga box9. Melalui kode CSS, mewarnai semua box dengan abu-abu (background-color: silver). Ketika di klik, perintah jQuery berikut akan dijalankan:

if ($(this).attr("id")==box_ajaib) {
  $(this).css("background-color","green");
  ketemu = "sudah";
}
else {
  $(this).css("background-color","red");
}

Pada baris pertama, membuat sebuah kondisi if untuk memeriksa apakah kotak saat ini memiliki id = box_ajaib. Disini menggunakan jQuery selector $(this).attr(“id”). Jika id-nya sama sama dengan isi variabel box_ajaib, kotak akan berwarna hijau. Jika tidak, kotak akan berwarna merah.

Variabel box_ajaib adalah sebuah variabel yang digenerate secara acak menggunakan perintah JavaScript:

var angka = Math.floor((Math.random() * 9) + 1);
var box_ajaib = "box"+angka;

Variabel angka dari perintah diatas akan menghasilkan angka acak antara 1-9. Variabel ini kemudian diberikan awalan “box”, sehingga variabel box_ajaib akan berisi string seperti “box1”, “box5” atau “box9”. String ini akan berubah-ubah setiap kali kode program dijalankan.

Misalkan isi variabel box_ajaib adalah “box7”. Maka ketika masuk ke kondisi if, hanya ketika box7 di klik lah, akan berubah menjadi hijau. Inilah box yang harus di klik untuk memenangkan permainan.

Ketika box yang benar ditemukan, juga men-set sebuah variabel ketemu = “sudah”. Ini akan dijadikan patokan apakah game berhasil di selesaikan atau tidak. Pengecekan ini dilakukan dengan kode program berikut:

// cek hasil game
if ((ketemu=="sudah") && (jumlah_klik <= 3)) {
  $("#hasil").html("You Win!");
}
if ((ketemu=="belum") && (jumlah_klik >= 3)) {
  $("#hasil").html("Game Over... coba lagi gan!");
}

Game hanya dimenangkan jika variabel ketemu berisi string “sudah”, dan jumlah_klik kurang dari 3. Selain itu, berarti gameover.

Untuk menghitung jumlah klik, dibuat kode program JavaScript berikut di dalam event click() box:

jumlah_klik++;
$("#hitung").html("Jumlah Klik = "+jumlah_klik);

Dengan demikian, setiap kali box di klik, variabel jumlah_klik akan bertambah sebanyak 1 angka. Jumlah klik ini kemudian ditampilkan menggunakan method html().

Hasilnya: Sebuah Game Tebak Kotak

Inspirasi & Seni Technology

Sunday, June 12, 2022

Belajar jQuery - III [ Animation ]