Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteFront endTeknik Dasar jQuery JavaScript untuk membuat Website yang Menarik!

Teknik Dasar jQuery JavaScript untuk membuat Website yang Menarik!

-

Last Updated on January 11, 2022 by

jQuery adalah salah satu library Javascript terpopuler dan paling banyak digunakan saat ini. Mengoperasikannya pun terbilang cukup mudah. Dengan kemudahan yang ditawarkan ini pula, membuat jQuery cocok digunakan oleh para developer website pemula.

jQuery adalah salah satu pilihan library JavaScript yang dapat membuat situs Anda lebih menarik dengan berbagai efek serta animasi.

Ada beberapa properti CSS yang dapat dianimasikan dengan jQuery yaitu, width, height, margin, padding, opacity, top, dan left. Properti ini disebut sebagai properti numerik. Properti non-numerik tidak dapat dianimasikan dengan fungsionalitas jQuery yang bersifat dasar. Untuk membuat animasi warna, Anda dapat menggunakan plugin warna jQuery.

Artikel kali ini akan mengulas beberapa teknik yang dapat membuat website Anda lebih menarik dan animatif. Berikut kami sajikan beberapa metode menganimasi properti pada HTML menggunakan jQuery.

Mengenal Berbagai Effect dalam jQuery

jquery

Sebelum melangkah lebih jauh mengenal bagaimana cara menganimasikan website dengan jQuery, perlu Anda ketahui beberapa fungsi effect yang ada pada jQuery yang kami jabarkan sebagai berikut:

  • hide() adalah fungsi effect untuk menyembunyikan suatu element.
  • show() adalah fungsi effect untuk menampilkan suatu element.
  • toggle() adalah fungsi effect untuk menampilkan dan menyembunyikan element.
  • fadeIn() adalah fungsi effect untuk menampilkan element dengan efek memudar.
  • fadeOut() adalah fungsi effect untuk menyembunyikan element dengan efek memudar.
  • fadeToggle() adalah fungsi effect untuk menampilkan dan menyembunyikan element dengan effect memudar.
  • slideDown() adalah fungsi effect untuk menampilkan elemen dengan effect slide ke bawah.
  • slideUP() adalah fungsi effect untuk menyembunyikan elemen dengan effect slide ke atas.
  • slideToggle() adalah fungsi effect untuk menampilkan dan menyembunyikan element dengan efek slide.
  • animation() adalah fungsi effect untuk menggerakan atau menganimasi element.

Penggunaan fungsi effect pada jQuery ini cenderung mudah karena fungsi effect memiliki syntax yang lebih pendek. Berikut adalah contoh code penggunaan fungsi effect show dan fungsi effect hide.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('.box').show();
});
$("button2").click(function(){
$('.box').hide();
});
});
</script>

Berikut adalah contoh penggunaan fungsi effect slide dengan menggunakan code:

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('.box').slideDown();
});
$("button2").click(function(){
$('.box').slideUP();
});
$("button2").click(function(){
$('.box').slideToggle();
});
});
</script>

Bisa dilihat dari perbedaan kedua rumus tersebut, Anda hanya perlu mengubah fungsi effect yang ada pada code- code tersebut saja. Selain itu Anda dapat menambahkan fungsi baru bila membutuhkan lebih banyak fungsi effect. Mudah bukan? Mari beranjak ke fungsi effect animasi.

Artikel Terkait  FileZilla Adalah? Pengertian Hingga Cara Menggunakannya

Membuat Animasi pada jQuery: Basic Syntax Animasi jQuery

syntax animasi

Pada dasarnya fungsi effect animasi mirip dengan fungsi effect lainnya. Hanya saja pada fungsi animasi, Anda perlu menambahkan durasi animasi dan melakukan callback. Adapun sintaks dasar metode animasi dalam jQuery adalah:

$(selector) .animate({ properties }, duration, callback);

Parameter animate() menentukan properti CSS yang akan dianimasikan. Parameter durasi untuk menentukan berapa lama animasi yang Anda buat ini akan berjalan. Durasi ini pun bersifat opsional atau dapat ditentukan menggunakan salah satu string yang telah ditentukan, seperti ‘slow’ atau ‘fast’.

Anda juga dapat mengubahnya dalam satuan milidetik. Semakin tinggi nilainya, membuat animasi Anda akan semakin lambat begitu pula sebaliknya, semakin rendah nilainya maka animasi Anda juga akan semakin cepat. Kemudian, parameter callback  yang juga bersifat opsional, untuk memanggil atau mengulang kembali animasi yang telah selesai.

Berikut ini adalah contoh rumus menggerakan gambar dari posisinya 500 piksel ke kiri saat mengklik tombol.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
right: 500
});
});
});
</script>

Seluruh elemen HTML mempunyai posisi statis pada settingan dasarnya di jQuery. Elemen statis tidak dapat dipindahkan, untuk itu Anda harus mengatur property posisi CSS agar elemen dapat bergerak dengan nilai relative, fixed, atau absolute untuk menganimasi posisinya.

Menganimasi Beberapa Properti Sekaligus

Dengan parameter animate(), Anda juga dapat menganimasi beberapa properti elemen sekaligus secara bersamaan. Namun, hal yang perlu diperhatikan adalah sebelum menganimasi property border-width, Anda harus megatur property border-style.

Elemen ANda harus mempunyai batas sebelum dapat menganimasikan border width, karena properti border-style tidak memiliki nilai standar atau nilai bawaan.

Berikut contoh code tersebut.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>

Menganimasi Banyak Properti Satu per Satu (Queued Animation)

Anda dapat menganimasi banyak properti elemen satu per satu dalam queue dengan fitur chaining jQuery. Fitur ini juga memungkinkan Anda melakukan beberapa tindakan pada tetapan elemen yang sama dalam satu baris kode.  Berikut contoh rumusnya:

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p")
.animate({width: "100%"})
.animate({fontSize: "50px"})
.animate({borderWidth: 35});
});
});
</script>

Anda juga dapat menjadikan kode tersebut menjadi satu baris kode seperti pada rumus sintaks di atas. Rumusnya menjadi:

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").animate({width: "100%"}).animate({fontSize: "50px"}).animate({borderWidth: 35});
});
});
</script>

Rumus ini adalah rumus untuk metode chaining three animate(). Ketika seorang pengguna mengklik tombol pemicu, hal tersebut akan memperluas <p> menuju 100% width. Begitu perubahan width selesai, font size mulai dianimasikan, kemudian border animation akan dimulai.

Artikel Terkait  Landing Page Adalah? Apa Bedanya dengan Website?

Properti Animasi dengan Nilai Relatif

Anda dapat menentukan nilai relative pada properti animasi. Apabila nilai ditentukan dengan awal += atau -=, maka nilai target dihitung dengan menambah atau mengurangi angka yang diberikan dari nilai properti.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>

Menggunakan Fungsi String untuk Properti Animasi yang Nilainya telah Ditentukan

Setiap properti tidak hanya dapat menggunakan nilai numerik, salah satu cara mudah menganimasikan website Anda dengan menggunakan string, seperti, show, hide, dan toggle. Metode ini membantu ketika Anda hanya ingin menghidupkan properti dari nilai saat ini ke nilai awal atau pun sebaliknya.  Berikut salah satu contoh rumus menggunakan string toggle:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>

Menghentikan Animasi

Menghentikan animasi atau efek yang sedang berjalan pada elemen yang belum selesai dapat menggunakan parameter stop(). Sintaks dasar metode ini adalah:

$(selector).stop(stopAll, goToEnd);

StopAll pada rumus tersebut merupakan Boolean opsional yang memnentukan untuk menghapus queued animation atau tidak. Kemudian, terdapat nilai tetap atau standar false yang berarti animasi yang sedang berjalan akan dihentikan, animasi lainnya dalam queued akan setengah berjalan. Lalu, Boolean goToEnd opsional menentukan animasi tersebut akan segera selesai atu tidak. Berikut contoh rumus Stop Animation:

script type="text/javascript">
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=200px"}, 2000);
});

// Stop running animation
$(“.stop-btn”).click(function(){
$(“img”).stop();
});

// Start animation in the opposite direction
$(“.back-btn”).click(function(){
$(“img”).animate({left: “-=200px”}, 2000);
});

// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>

Fungsi Callback

Pada JavaScript pernyataan umumnya dilakukan per baris. Namun, efek jQuery biasanya membutuhkan waktu untuk menyelesaikan kode baris, sehingga kode baris berikutnya akan dieksekusi saat efek sebelumnya masih berjalan.

Menghindari hal tersebut kita dapat menggunakan fungsi callback. Fungsi callback ini bisa diterapkan pada semua fungsi effect pada jQuery tidak terbatas pada fungsi animasi saja. Berikut contoh penerapan callback.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("fast");
alert("The slide toggle effect has completed.");
});
});
</script>

Demikianlah beberapa teknik dasar dalam pembuatan website yang lebih menarik dan animatif dengan menggunakan jQuery. Teknik-teknik ini adalah teknik dasar sehingga cocok dicoba untuk Anda yang baru terjun dalam dunia coding. Yuk kunjungi terus situs Appkey.id dan dapatkan informasi terbaru setiap harinya!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya