BAB 14

Framework Javascrip: Efek-efek Jquery

A. TUJUAN
1. Mengenal efek-efek padaFramework AJAX : jQuery.
2. Mempelajari dan Mengimplementasikan efek-efek yang tersedia pada jQuery.

B. LANDASAN TEORI
1. PENGENALAN EFEK-EFEK JQUERY
JQuery merupakan suatu framework (library) Javascript yang menekankan
bagaimana interaksi antara Javascript dan HTML. Tujuan dari jQuery adalah
membuatnya lebih mudah untuk menggunakan JavaScript pada website Anda. jQuery
membutuhkan banyak tugas umum yang membutuhkan banyak baris kode JavaScript
untuk mencapai, dan membungkus mereka menjadi metode yang dapat Anda hubungi
dengan satu baris kode. jQuery juga menyederhanakan banyak hal-hal rumit dari
JavaScript, seperti panggilan AJAX dan manipulasi DOM.
Penggunaan Jenis Efek jQuery ada banyak cara untuk menampilkan lightbox
overlay dengan bermacam efek. Seperti yang sedang banyak di pakai saat ini adalah
pengggunaan style lightbox untuk menampilkan efek pada widget dengan beberapa
cara modern yang salah satunya mereka gunakan adalah menggunakan CSS transisi
dan animasi untuk membuat efek pada kotak dialog saat muncul. Dalam desain user
interface, modal dialog dikenal sebagai jendela tampilan baru kotak dialog yang
mengharuskan pengguna untuk berinteraksi sebelum mereka dapat kembali ke operasi
tampilan induk, sehingga mencegah alur kerja pada tampilan utama. Di Web/blog,
Modal Dialog sering digunakan untuk menampilkan gambar secara rinci ataupun
widget lainnya, dalam pola yang dikenal sebagai Lightbox. Efek lightbox sering juga
disebut Modal Window atau Modal Dialog karena tampilan jendela sering digunakan
untuk menampilkan kotak dialog. Apabila ingin mengkombinasikan untuk membuat
kotak dialog dengan beberapa macam efek pada blog anda, tapi kali ini saya akan
membahas tentang efek-efek yang dapat di gunakan dalam pembuatan web/blog.

Efek-efek Jquery | 1
2. EFEK-EFEK PADA JQUERY
a. Jquery Hide/Show
JQuery .show(), .hide() dan .toggle()
Dengan jquery kita bisa memberikan efek-efek khusus pada elemen html.
Salah satu efek tersebut adalah hide/show, dengan kata lain kita bisa
menyembunyikan dan menampilkan suatu elemen html tertentu.
 .show()
Digunakan untuk memunculkan/menampilkan kembali elemen yang telah
terkena efek hide(). Selain itu, kita bisa menggunakan fungsi ini untuk
menampilkan elemen yang disembunyikan dengan css. Berikut adalah
sintaks dan parameter untuk menjelaskan tentang diskripsi dari efek sintak
.show ditunjukkan pada table 1.1.
Sintaks:
$(selector).show(speed,easing,callback)

Tabel 1.1 Jquery Show

Parameter Description
speed Menentukan kecepatan efek show .
Nilai default adalah 400 mili per detik
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
Easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing " yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
Callback Fungsi yang akan dieksekusi setelah
metode show ( ) selesai atau
memanggil kembali.

Efek-efek Jquery | 2
 .hide()
Digunakan untuk menyembunyikan objek atau elemen tertentu. Berikut
adalah sintaks dan parameter untuk menjelaskan tentang diskripsi dari efek
sintak .hide ditunjukkan pada table 1.2.
Sintaks:
$(selector).hide(speed,easing,callback)

Tabel 1.2 Jquery Hide

Parameter Deskripsi
speed Menentukan kecepatan efek hide .
Nilai default adalah 400 mili per detik
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode hide ( ) selesai atau memanggil
kembali.

 .toggle()
Merupakan gabungan antara efek .show() dan .hide(). Jadi, saat elemen
sedang muncul, maka .toggle() bertugas untuk menyembunyikannya,
sedangkan saat elemen sedang menghilang, maka .toggle() bertugas untuk
menampilkannya. Pemasangan jQuery pada template cukup 1 saja. Apabila
ada beberapa versi framework jQuery, maka efek-efek tidak akan berjalan.
Berikut adalah sintaks dan parameter untuk menjelaskan tentang diskripsi
dari efek sintak .toggle ditunjukkan pada table 1.3.

Efek-efek Jquery | 3
 Sintaks:
$(selector).toggle(speed,easing,callback)

Tabel 1.3 Jquery Toggle

Parameter Description
speed Menentukan kecepatan
menyembunyikan / efek toggle
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode toggle ( ) selesai atau
memanggil kembali.

b. Jquery Fade
Metode Memudar jQuery
Dengan jQuery Anda bisa memudar unsur masuk dan keluar dari
visibilitas. jQuery memiliki metode fade berikut:
 .fadeIn()
Digunakan untuk memunculkan objek yang tersembunyi dengan
menciptakan efek kenaikan tigkat transparasi. Berikut adalah sintaks dan
parameter untuk menjelaskan tentang diskripsi dari efek sintak .fadein
ditunjukkan pada table 1.4.
Sintaks:
$(selector).fadeIn(speed,easing,callback)

Efek-efek Jquery | 4
 Tabel 1.4 Jquery Fadein
Parameter Description
speed Menentukan kecepatan efek memudar .
Nilai default adalah 400 milidetik
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode fadeIn ( ) selesai

 .fadeOut()
Digunakan untuk menyembunyikan objek yang tampil dengan menciptakan
efek penurunan tigkat transparasi hingga pada akhirnya menghilang total
(display:none). Berikut adalah sintaks dan parameter untuk menjelaskan
tentang diskripsi dari efek sintak .fadeout ditunjukkan pada table 1.5.
Sintaks:
$(selector).fadeOut(speed,easing,callback)

Tabel 1.5 Jquery Fadeout

Parameter Description
speed Menentukan kecepatan efek memudar .
Nilai default adalah 400 milidetik
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "

Efek-efek Jquery | 5
 easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode fadeOut ( ) selesai

 .fadeToggle()
Adalah gabungan antara efek .fadeIn() dan .fadeOut(). Jadi, saat elemen
sedang menghilang, maka .fadeToggle() bertugas untuk menampilkannya,
sedangkan saat elemen sedang tampil, maka .fadeToggle() bertugas untuk
menyembunyikannya. Berikut adalah sintaks dan parameter untuk
menjelaskan tentang diskripsi dari efek sintak .fadein ditunjukkan pada table
1.6.
Sintaks:
$(selector).fadeToggle(speed,easing,callback)

Tabel 1.6 Jquery Fadetoggle

Parameter Description
speed Menentukan kecepatan efek memudar .
Nilai default adalah 400 milidetik
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
easing Menentukan kecepatan elemen di
berbagai sudut efek . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam

Efek-efek Jquery | 6
 kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode fadeToggle ( ) selesai

 .fadeTo()
Memungkinkan kita untuk menciptakan penurunan tingkat transparasi
sampai pada titik tertentu tanpa harus menghilangkan elemen layaknya
menggunakan efek .fadeOut(). Berikut adalah sintaks dan parameter untuk
menjelaskan tentang diskripsi dari efek sintak .fadeTo ditunjukkan pada
table 1.7.
Sintaks:
$(selector).fadeTo(speed,easing,callback)

Tabel 1.7 Jquery Fadeto

Parameter Description
speed Menentukan kecepatan efek memudar .
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
opacity Yang di butuhkan untuk kecepatan
efek memudar anata 0.00 dan 1.00
easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode fadeTo ( ) selesai

Efek-efek Jquery | 7
c. Jquery Slide
Dengan jQuery Anda dapat membuat efek geser pada elemen. jQuery memiliki
metode slide yang berikut:
 .slideDown
Digunakan untuk menunjukkan unsur-unsur yang dipilih. Berikut adalah
sintaks dan parameter untuk menjelaskan tentang diskripsi dari efek sintak
.slideDown ditunjukkan pada table 1.8.
Sintaks:
$(selector).slideDown(speed,easing,callback)

Tabel 1.8 Jquery Slidedown

Parameter Description
speed Menentukan kecepatan efek slide.
Nilai default adalah 400 milidetik
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode slideDown ( ) selesai

 .slideUp()
Digunakan untuk menyembunyikan unsur-unsur yang dipilih. Berikut
adalah sintaks dan parameter untuk menjelaskan tentang diskripsi dari efek
sintak .slideUp ditunjukkan pada table 1.9.
Sintaks:
$(selector).slideUp(speed,easing,callback)

Efek-efek Jquery | 8
 Tabel 1.9 Jquery Slideup
Parameter Description
speed Menentukan kecepatan efek slide.
Nilai default adalah 400 milidetik
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode slideUp()selesai

 .slideToggle()
Digunakan untuk memeriksa unsur-unsur yang dipilih untuk visibilitas
.slideDown ( ) dijalankan jika elemen tersembunyi. slideUp ( ) dijalankan
jika elemen terlihat, ini menciptakan efek beralih dari terlihat menjadi hilang
(tidak terlihat). Berikut adalah sintaks dan parameter untuk menjelaskan
tentang diskripsi dari efek sintak .slideToggle ditunjukkan pada table 1.10.
Sintaks:
$(selector).slideToggle(speed,easing,callback)

Tabel 1.10 Jquery Slidetoggle

Parameter Description
speed Menentukan kecepatan efek slide.
Nilai default adalah 400 milidetik
Kemungkinan nilai :
 milidetik
 "lambat "

Efek-efek Jquery | 9
  "cepat "
easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
metode slideToggle ( ) selesai

d. Jquery Animate
Metode ini mengubah elemen dari satu ke yang lain dengan gaya CSS . Nilai
properti CSS berubah secara bertahap, untuk membuat efek animasi. Parameter
kecepatan opsional menentukan durasi efek. Hal ini dapat mengambil nilai-nilai
berikut: "lambat" , "cepat ", atau milidetik. Parameter callback opsional adalah
fungsi yang akan dieksekusi setelah animasi selesai. Berikut adalah sintaks dan
parameter untuk menjelaskan tentang diskripsi dari efek sintak .animate
ditunjukkan pada table 1.11 atau sintak .animate yang lain bias dilihat pada table
1.12.
Sintaks:
(selector).animate({styles},speed,easing,callback)

Tabel 1.11 Jquery Animate

Parameter Description
styles Menentukan satu atau lebih CSS
properti / nilai untuk menghidupkan.
Catatan : Nama-nama properti
digunakan dengan metode bernyawa
(): Anda akan perlu menulis
paddingLeft bukan padding-left,
marginRight bukan margin-right , dan
sebagainya .
Properti animasi yang dapat

Efek-efek Jquery | 10
digunakan:
 backgroundPositionX
 backgroundPositionY
 borderWidth
 borderBottomWidth
 borderLeftWidth
 borderRightWidth
 borderTopWidth
 borderSpacing
 margin
 marginBottom
 marginLeft
 marginRight
 marginTop
 outlineWidth
 padding
 paddingBottom
 paddingLeft
 paddingRight
 paddingTop
 height
 width
 maxHeight
 maxWidth
 minHeight
 minWidth
 fontSize
 bottom
 left
 right
 top
 letterSpacing
 wordSpacing
 lineHeight
 textIndent

Efek-efek Jquery | 11
 speed Menentukan kecepatan animasi . Nilai
default adalah 400 milidetik
Kemungkinan nilai :
 milidetik
 "lambat "
 "cepat "
easing Menentukan kecepatan elemen di
berbagai sudut animasi . Nilai default
adalah " swing"
Kemungkinan nilai :
" swing" yaitu bergerak lambat di awal
/ akhir , tapi lebih cepat di tengah
" linear " yaitu bergerak dalam
kecepatan konstan
callback Fungsi yang akan dieksekusi setelah
animasi selesai.

Alternatif Sintaks:
(selector).animate({styles},{options})

Tabel 1.12 Jquery Animatealternatif Sintaks

Parameter Description
styles Menentukan satu atau properti CSS
lebih / nilai untuk menghidupkan
(Lihat nilai yang mungkin di atas)
options Menentukan pilihan tambahan untuk
animasi . Kemungkinan nilai :
 speed - mengatur kecepatan
animasi
 easing- menetapkan fungsi
pelonggaran untuk
menggunakan
 callback - menentukan fungsi
yang akan dieksekusi setelah
animasi selesai

Efek-efek Jquery | 12
  step - menentukan fungsi yang
akan dieksekusi setelah setiap
langkah dalam animasi
 queue - nilai Boolean
menentukan apakah atau tidak
untuk menempatkan animasi
dalam antrian efek
 specialEasing - peta dari satu
atau lebih CSS properti dari
parameter gaya , dan mereka
sesuai fungsi pelonggaran

Table 1.12 Menjelaskan Tentang Diskripsi Dari Sintak .Animate

e. Jquery Stop
JQuery stop ( ) metode yang digunakan untuk menghentikan animasi atau
efek sebelum selesai. Berhenti ( ) metode bekerja untuk semua fungsi efek
jQuery, termasuk geser, memudar dan animasi kustom. Berikut adalah sintaks
dan parameter untuk menjelaskan tentang diskripsi dari efek sintak .stop
ditunjukkan pada table 1.13.
Sintaks:
$(selector).stop(stopAll,goToEnd)

Tabel 1.13 Jquery Stop

Parameter Description
stopAll Menentukan apakah atau tidak untuk
menghentikan animasi. Default adalah
salah
goToEnd menentukan apakah atau tidak untuk
menyelesaikan semua animasi segera .
Default adalah salah
Table 1.13 Menjelaskan Tentang Diskripsi Dari Sintak .Stop

f. Jquery Callback
Callback adalah fungsi yang dipanggil setelah suatu fungsi dijalankan,
callback ini bisa berupa fungsi lain, atau fungsi yang kita buat sendiri atau dengan

Efek-efek Jquery | 13
 kata lain efek, baris berikutnya kode dapat dijalankan meskipun efeknya tidak
selesai. Hal ini dapat membuat kesalahan. Untuk mencegah hal ini, Anda dapat
membuat fungsi callback. Sebuah fungsi callback dijalankan setelah efek saat ini
selesai.

Gambar 14.1 Ilustrasi Callback

Dimulai dari menjalankan Fungsi 1 (function 1), di dalam fungsi ini akan
dijalankan perulangan dari 1 sampai 2, dan akan menampilkan Alert atau pesan
popup sebanyak 2 kali, dan setelah fungsi selesai (End), maka akan memanggil
callback, atau fungsi selanjutnya, yaitu fungsi 2 (function 2), dalam fungsi ini
akan ditampilkan Alert atau pesan popup sebanyak satu kali. Jadi jelas sekali
bahwa callback itu akan dijalankan setelah fungsi pertama selesai dijalankan.

g. Jquery Chaining
Satu lagi salah satu aspek yang sangat hebat dari jquery adalah fakta bahwa
sebagian besar metode kembali jquery sebuah objek yang kemudian anda dapat
menggunakan metode lain untuk memanggil. Hal ini memungkinkan anda untuk
melakukan perintah chaining, di mana anda dapat melakukan beberapa metode
yang sama di set elemen, yang sangat rapi dan karena itu menyelamatkan anda
dari browser yang memiliki elemen yang sama untuk menemukan lebih dari
sekali.
Digunakan untuk untuk menjalankan beberapa perintah jQuery, satu demi
satu, pada elemen yang sama (s). Tip: Dengan cara ini, browser tidak perlu
menemukan elemen yang sama (s) lebih dari sekali. Untuk rantai tindakan, Anda
hanya menambahkan tindakan untuk aksi sebelumnya.

Efek-efek Jquery | 14
C. LANGKAH-LANGKAH PERCOBAAN
1. JQUERY HIDE/SHOW
Contoh sederhana member efek menyembunyikan dan menampilkan suatu
elemen html tertentu, dapat dilihat dari program berikut ini.
1. <html>
2. <head>
3. <script src="jquery-2.1.1.min.js"></script>
4. <script>
5. $(document).ready(function(){
6. $("#hide").click(function(){
7. $("p").hide();
8. });
9. $("#show").click(function(){
10. $("p").show();
11. });
12. });
13. </script>
14. </head>
15. <body>
16. <p>Jika Anda klik pada tombol "Hide", kata akan hilang.</p>
17. <button id="hide">Hide</button>
18. <button id="show">Show</button>
19. </body>
20. </html>

Penjelasan Kode:
 Baris 3. Merupakan pemanggil file library pada jquery agar perintah yang
diberikan pada sintaks di bawahnya berjalan (memanggil file yang telah
disiapkan.).
 Baris 5. Statemen ini menerangkan sebuah document ( html ) sudah siap /
ready maka ada function yang diaktifkan. Fungsi apa yang diaktifkan, kita
lihat baris berikutnya.
 Baris 6. Digunakan untuk menyembunyikan objek atau elemen tertentu
apabila di klik maka obyek atau kata akan disembunyikan/di hilangkan
sementara.
 Baris 7. Paragraph yang akan dipanggil sewaktu hide diklik maka akan
hilang.
 Baris 9. Digunakan untuk memunculkan/menampilkan kembali elemen yang
telah terkenan efek hide().
 Baris 10. Paragraph yang akan dipanggil sewaktu show diklik maka akan
tampil.
 Baris 16. Paragraph atau kata yang akan ditampilkan dalam web.
 Baris 17. Pembuatan button/tombol untuk hide digunakan untuk
menyembunyikan objek atau elemen tertentu.
 Baris 18. Pembuatan button/tombol untuk menampilkan kata/paragraph
yang disembunyikan oleh hide.

Efek-efek Jquery | 15
 Hasil Tampilan:

Gambar 14.2 Tampilan Web Seblum Disembunyikan Paragrafnya

Gambar 14.3 Tampilan Web Sesudah diklik Hide

2. JQUERY FADE
Contoh yang saya ambil yaitu .fadeIn() digunakan untuk memunculkan objek
yang tersembunyi dengan menciptakan efek kenaikan tigkat transparasi, dapat dilihat
dari program berikut ini.
1. <html>
2. <head>
3. <script
src="jquery-2.1.1.min.js"></script>
<script>
4. $(document).ready(function(){
5. $("button").click(function(){

Efek-efek Jquery | 16
 a. $("#div1").fadeIn();
b. $("#div2").fadeIn("slow");
c. $("#div3").fadeIn(3000);
6. });
7. });
8. </script>
9. </head>
10. <body>
11. <p>Menunjukkan fadeIn () dengan parameter yang berbeda.</p>
12. <button>Click to fade in boxes</button><br><br>
13. <div id="div1" style="width:80px;height:80px;display:none;background-
color:red;"></div><br>
14. <div id="div2" style="width:80px;height:80px;display:none;background-
color:green;"></div><br>
15. <div id="div3" style="width:80px;height:80px;display:none;background-
color:blue;"></div>
16. </body>
17. </html>

Penjelasan Kode:
 Baris 3. Merupakan pemanggil file library pada jquery agar perintah yang
diberikan pada sintaks di bawahnya berjalan (memanggil file yang telah
disiapkan.).
 Baris 5. Statemen ini menerangkan sebuah document ( html ) sudah siap /
ready maka ada function yang diaktifkan. fungsi apa yang diaktifkan, kita
lihat baris berikutnya.
 Baris 6 Menjelaskan fungsi yang diaktifkan adalah "Jika si BUTTON di
CLICK " Fungsi apa yang diaktifkan, kita lihat baris berikutnya.
 Baris 6a,b,c. Digunakan untuk memunculkan objek yang tersembunyi
dengan menciptakan efek kenaikan tigkat transparasi kecepatan yaitu lambat.
 Baris 12. Paragraph atau kata yang akan ditampilkan dalam web.
 Baris 13. Membuat button atau tombol untuk menggetahu warna
degradasinya.
 Baris 14. Membuat transparasi warna gambar dengan lebar 80px, tinggi
80px dan berwarna merah.
 Baris 14. Membuat transparasi warna gambar dengan lebar 80px, tinggi
80px dan berwarna hijau.
 Baris 14. Membuat transparasi warna gambar dengan lebar 80px, tinggi
80px dan berwarna biru.
Hasil Tampilan:

Gambar 14.4 Tampilan Web Sebelum diklik Menampilkan Transparasi

Efek-efek Jquery | 17
 Gambar 14.5 Tampilan Web Sesudah diklik Menampilkan Transparasi Warna

3. JQUERY SLIDE
Contoh yang saya ambil yaitu .slideDown digunakan untuk menunjukkan unsur-
unsur yang dipilih, dapat dilihat dari program berikut ini.
1. <html>
2. <head>
3. <script
src="jquery-2.1.1.min.js"></script>
<script>
4. $(document).ready(function(){
5. $("#flip").click(function(){
6. $("#panel").slideDown("slow");
7. });
8. });
9. </script>
10. <style>
11. #panel, #flip {
12. padding: 5px;
13. text-align: center;
14. background-color: #e5eecc;
15. border: solid 1px #c3c3c3;
16. }
17. #panel {
18. padding: 50px;
19. display: none;
20. }
21. </style>
22. </head>
23. <body>
24. <div id="flip">Click to slide down panel</div>
25. <div id="panel">Hello world!</div>
26. </body>
27. </html>

Penjelasan Kode:
 Baris 3. Merupakan pemanggil file library pada jquery agar perintah yang
diberikan pada sintaks di bawahnya berjalan (memanggil file yang telah
disiapkan.).

Efek-efek Jquery | 18
  Baris 5. Statemen ini menerangkan sebuah document ( html ) sudah siap /
ready maka ada function yang diaktifkan. fungsi apa yang diaktifkan, kita
lihat baris berikutnya.
 Baris 6. Memberikan efek apabila diklik slide akan trun kebawah.
 Baris 7. Memanggil kata yang diinputkan dan menampilkannya.
 Baris 13. Lapisan penyekat antara atas dan bawah 5px.
 Baris 14. Teks berada di tengah-tengah.
 Baris 15. Beckgroud berwarna abu-abu.
 Baris 16. Ketebalan border 1px.
 Baris 19. Lapisan ketebalan panel 50px.
 Baris 25. Memberikan teks dengan efek flip (terjun) atau kebawah apabila
diklik.
 Baris 26. Panel yang kedua berisi teks “Hello word” yang di tampilkan
apabila di klik pada panel “Click to slide down panel”.
Hasil Tampilan:

Gambar 14.6 Tampilan Web Sebelum diklik Slide Down

Gambar 14.7 Tampilan Web Sebelum diklik Slide Down

4. JQUERY ANIMATE
Metode ini mengubah elemen dari satu ke yang lain dengan gaya CSS . Nilai
properti CSS berubah secara bertahap, untuk membuat efek animasi. Parameter

Efek-efek Jquery | 19
kecepatan opsional menentukan durasi efek. Hal ini dapat mengambil nilai-nilai
berikut: "lambat" , "cepat ", atau milidetik.
Parameter callback opsional adalah fungsi yang akan dieksekusi setelah animasi
selesai, dapat dilihat dari program berikut ini.
1. <html>
2. <head>
3. <script
src="jquery-2.1.1.min.js"></script>
4. <script>
5. $(document).ready(function(){
6. $("button").click(function(){
7. $("div").animate({left: '250px'});
8. });
9. });
10. </script>
11. </head>
12. <body>
13. <button>Start Animation</button>
14. <p>Secara default, semua elemen HTML memiliki posisi statis, dan tidak
dapat dipindahkan. Untuk memanipulasi posisi, ingatlah untuk pertama
mengatur properti CSS posisi dari elemen yang relatif tetap, atau
absolut!</p>
15. <div
style="background:#98bf21;height:100px;width:100px;position:absolute;"
></div>
16. </body>
17. </html>

Penjelasan Kode:
 Baris 3. Merupakan pemanggil file library pada jquery agar perintah yang
diberikan pada sintaks di bawahnya berjalan (memanggil file yang telah
disiapkan.).
 Baris 5. Statemen ini menerangkan sebuah document ( html ) sudah siap /
ready maka ada function yang diaktifkan. fungsi apa yang diaktifkan, kita
lihat baris berikutnya.
 Baris 6. Menjelaskan fungsi yang diaktifkan adalah "Jika si BUTTON di
CLICK " Fungsi apa yang diaktifkan, kita lihat baris berikutnya.
 Baris 7. Menjelaskan fungsi bergerak kea rah kiri, mencapai property kiri
250px.
 Baris 13. Membuat tombol memulai menjalankan efek animasi pergesetan.
 Baris 14. Paragraph atau kata yang akan ditampilkan dalam web.
 Baris 15. Memberikan efek animasi berupa backgraun gambar berwarna
hijauh, tinggi gambar 100px, lebar gambar 100px dan posisinya absolute
(tetap sejajar).

Efek-efek Jquery | 20
 Hasil Tampilan:

Gambar 14.8 Tampilan Web Efek Animasi

Gambar 14.9 Tampilan Web Efek Animasi Berpindah kesisi Kiri

5. JQUERY STOP
JQuery stop ( ) metode yang digunakan untuk menghentikan animasi atau efek
sebelum selesai.
Berhenti ( ) metode bekerja untuk semua fungsi efek jQuery, termasuk geser,
memudar dan animasi kustom, dapat dilihat dari program berikut ini.
1. <html>
2. <head>
3. <script
src="jquery-2.1.1.min.js"></script>
4. <script>
5. $(document).ready(function(){
6. $("#flip").click(function(){

Efek-efek Jquery | 21
 a. $("#panel").slideDown(5000);
7. });
8. $("#stop").click(function(){
a. $("#panel").stop();
9. });
10. });
11. </script>
12. <style>
13. #panel, #flip {
14. padding: 5px;
15. font-size: 18px;
16. text-align: center;
17. background-color: #555;
18. color: white;
19. border: solid 1px #666;
20. border-radius: 3px;
21. }
22. #panel {
23. padding: 50px;
24. display: none;
25. }
26. </style>
27. </head>
28. <body>
29. <button id="stop">Stop sliding</button>
30. <div id="flip">Click to slide down panel</div>
31. <div id="panel">Hello world!</div>
32. </body>
33. </html>

Penjelasan Kode:
 Baris 3. Merupakan pemanggil file library pada jquery agar perintah yang
diberikan pada sintaks di bawahnya berjalan (memanggil file yang telah
disiapkan.).
 Baris 5. Statemen ini menerangkan sebuah document ( html ) sudah siap /
ready maka ada function yang diaktifkan. fungsi apa yang diaktifkan, kita
lihat baris berikutnya.
 Baris 6. Memberikan efek apabila diklik slide akan trun kebawah.
 Baris 6a. memberikan efek slide turun kebawah.
 Baris 8. Menghentikan slide sewaktu slide sedang berjalan.
 Baris 14. Lapisan penyekat antara atas dan bawah 5px.
 Baris 15. Ukuran huruf sebesar 18px.
 Baris 16. Teks berada di tengah-tengah.
 Baris 17. Beckgroud berwarna hitam.
 Baris 18. Warna tulisan/huruf yaitu putih.
 Baris 19. Ketebalan border 1px, berwarna hitam.
 Baris 23. Lapisan ketebalan panel 50px.
 Baris 29. Membuat tombol untuk menghentikan sliding kebawah, sehingga
memberikan efek tidak meneruskan sampai selesai.

Efek-efek Jquery | 22
  Baris 30. Memberikan teks dengan efek flip (terjun) atau kebawah apabila
diklik.
 Baris 31. Panel yang kedua berisi teks “Hello word” yang di tampilkan
apabila di klik pada panel “Click to slide down panel”.

Hasil Tampilan:

Gambar 14.10 Tampilan Web Efek Berhenti

Gambar 14.11 Tampilan Web Efek Stop Ketika Berjalan Kemudian diklik Stop Slding

Gambar 14.12 Tampilan Web Proses Secara Sempurna

6. JQUERY CALLBACK
Callback adalah fungsi yang dipanggil setelah suatu fungsi dijalankan, callback
ini bisa berupa fungsi lain, atau fungsi yang kita buat sendiri atau dengan kata lain
efek, baris berikutnya kode dapat dijalankan meskipun efeknya tidak selesai. Hal ini
dapat membuat kesalahan. Untuk mencegah hal ini, Anda dapat membuat fungsi

Efek-efek Jquery | 23
callback. Sebuah fungsi callback dijalankan setelah efek saat ini selesai, dapat dilihat
dari program berikut ini.
1. <html>
2. <head>
3. <script
src="jquery-2.1.1.min.js"></script>
4. <script>
5. $(document).ready(function(){
6. $("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
7. });
8. });
9. </script>
10. </head>
11. <body>
12. <button>Hide</button>
13. <p>This is a paragraph with little content.</p>
14. </body>
15. </html>

Penjelasan Kode:
 Baris 3. Merupakan pemanggil file library pada jquery agar perintah yang
diberikan pada sintaks di bawahnya berjalan (memanggil file yang telah
disiapkan.).
 Baris 5. Statemen ini menerangkan sebuah document ( html ) sudah siap /
ready maka ada function yang diaktifkan. fungsi apa yang diaktifkan, kita
lihat baris berikutnya.
 Baris 6. Menjelaskan fungsi yang diaktifkan adalah "Jika si BUTTON di
CLICK " Fungsi apa yang diaktifkan, jika diklik maka akan keluar
peringatan bahwasanya teks sedang disembunyikan.
 Baris 12. Membuat tombol hide untuk menghilangkan teks atau paragraph
yang ada.
 Baris 13. Paragraph atau kata yang ditampilkan diweb.
Hasil Tampilan:

Gambar 14.13Tampilan Web Sebelum diklik Hide

Efek-efek Jquery | 24
 Gambar 14.14 Tampilan Web Setelah diklik Hide

Gambar 14.15 Tampilan Web Berupa Alert (peringatan)

Efek-efek Jquery | 25