Mengingat bahwa jQuery UI ialah plugin, maka sintaks jQuery UI tidak sama dengan sintaks imbas dalam jQuery. Bisa dibilang, jQuery UI hanya menyisipkan dirinya di dalam imbas jQuery yang umum digunakan.
.show(), .hide() dan .toggle() ialah tiga bab pokok yang akan selalu Anda pakai ketika menjalankan imbas jQuery UI. Selain itu ada satu lagi fungsi khusus untuk jQuery UI yaitu .effect()
Berbeda dengan .show(), .hide() dan .toggle() yang sanggup mengubah visibilitas elemen, .effect() hanya berfungsi untuk membantu jQuery UI menjalankan animasi tanpa mengubah visibilitas elemen. (Biasanya dipakai untuk efek-efek emosional yang tidak memerlukan penghilangan/pemunculan elemen).
Dasar Penggunaan
Saat Anda menyembunyikan elemen dengan fungsi .hide(), maka Anda akan menuliskannya ibarat ini:
$('div').hide(1000);Sekarang Anda ingin menambahkan imbas blind pada elemen yang akan Anda sembunyikan, maka Anda sanggup menambahkan imbas jQuery UI dengan cara ibarat ini:
$('div').hide("blind", 1000);Setiap imbas mempunyai beberapa opsi di dalamnya. Misalnya, secara default imbas blind akan menutup elemen secara horizontal. Jika Anda ingin membuat imbas penutupan secara vertikal, Anda tinggal memilih opsi direction: "vertical" pada parameter opsi. Bagian opsi dibentuk sehabis nama imbas dan dikelompokkan di dalam braket objek:
$('div').hide("blind", { direction: "vertical" }, 1000);Hal yang sama juga sanggup dilakukan untuk .show(), .toggle() dan .effect(). .effect() hanya mempunyai kegunaan jikalau diterapkan pada efek-efek emosional yang tidak memerlukan perubahan visibilitas elemen.
jQuery
$('div').hide(durasi);jQuery UI
$('div').hide("nama_efek", {opsi1, opsi2, opsi3}, durasi);Lihat Semua Demo
Lihat semua efeknya terlebih dahulu sebelum mempelajari ini:
Efek-Efek jQuery UI
blind
Efek jQuery UI ini tidak jauh berbeda dengan .slideDown() dan .slideUp(). Keistimewaannya ialah sanggup diarahkan secara horizontal. Sesuatu yang selama ini tidak sanggup dilakukan oleh .slideDown() dan .slideUp()
| Opsi | Nilai | Deskripsi |
|---|---|---|
| direction | "vertical" | Membuka/menutup elemen secara vertikal |
"horizontal" | Membuka/menutup elemen secara horizontal |
$('div').toggle("blind", { direction: "horizontal" }, 1000);bounce
Efek ini akan membuat elemen bergetar sebanyak opsi yang ditentukan dan akan mengarahkan getaran sesuai dengan arah direksinya.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| times | 1, 2, 3, … | Menentukan jumlah getaran |
| direction | "up" | Menggetarkan elemen ke atas |
"down" | Menggetarkan elemen ke bawah | |
"left" | Menggetarkan elemen ke kiri | |
"right" | Menggetarkan elemen ke kanan |
$('div').effect("bounce", { direction: "up", times: 10 }, 1000);clip
Efek ini akan menutup elemen menuju garis sentra atau membuka elemen dari garis pusat.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| direction | "horizontal" | Membuka/Menutup elemen dengan gerakan horizontal (garis sentra berupa garis vertikal) |
"vertical" | Membuka/Menutup elemen dengan gerakan vertikal (garis sentra berupa garis horizontal) |
$('div').toggle("clip", { direction: "horizontal" }, 1000);drop
Efek ini akan menampilkan/menyembunyikan elemen dengan imbas memudar bersamaan dengan perubahan letak sesuai dengan direksinya.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| direction | "up" | Perubahan tingkat transparasi dan perpindahan posisi elemen menuju ke atas |
"down" | Perubahan tingkat transparasi dan perpindahan posisi elemen menuju ke bawah | |
"left" | Perubahan tingkat transparasi dan perpindahan posisi elemen menuju ke kiri | |
"right" | Perubahan tingkat transparasi dan perpindahan posisi elemen menuju ke kanan |
$('div').hide("drop", { direction: "up" }, 1000);explode
Ini ialah imbas favorit Saya. Efek ini akan meledakkan elemen!
| Opsi | Nilai | Deskripsi |
|---|---|---|
| pieces | 1, 2, 3, … | Menentukan jumlah bagian (default: 9) |
$('div').hide("explode", { pieces: 36 }, 1000);fold
Elemen akan dikenai imbas melipat. Batas final lipatan sanggup ditentukan dalam opsi. Default arah lipatan ialah vertikal kemudian horizontal.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| size | 1, 2, 3, … | Menentukan batas terkecil lipatan (default: 15) |
"10%", "50%" … | ||
| horizFirst | true | Menentukan apakah imbas akan dimulai dari horizontal terlebih dahulu atau vertikal terlebih dahulu |
false |
$('div').hide("fold", { size: 10 }, 1000);highlight
Elemen akan dikenai imbas sorotan. Warna sorotan sanggup ditentukan dalam opsi. Efek sanggup berupa sorotan saja atau berupa sorotan kemudian menghilangkannya.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| color | "#990000", "#ffa500", … | Menentukan warna sorotan (default: #ffff99) |
"red", "green", … | ||
"rgb(0, 0, 0)", "rgb(255, 255, 255)" … | ||
| mode | "show" | Menentukan apakah sehabis elemen dikenai sorotan akan menghilang atau tetap ibarat apa adanya (default: show) |
"hide" |
$('div').effect("highlight", { color: "#990000", mode: "hide" }, 1000);pulsate
Elemen akan dikenai imbas berdenyut. Jumlah denyutan sanggup ditentukan dalam opsi.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| times | 1, 2, 3, … | Menentukan banyaknya denyutan |
$('div').effect("pulsate", { times: 2 }, 1000);puff
Elemen akan dikenai imbas embusan (membesar dan memudar). Besar elemen sanggup ditentukan dalam opsi (persentase).
| Opsi | Nilai | Deskripsi |
|---|---|---|
| percent | 300, 400, 450, … | Menentukan persentase perubahan ukuran elemen (default: 150) |
$('div').hide("puff", { percent: 300 }, 1000);scale
Efek ini akan menutup elemen dengan imbas mengecil/membuka elemen dengan imbas membesar.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| origin | ["top", "left"] | Elemen akan mengecil menuju kiri atas/membesar dari kiri atas (default: menuju ke tengah) |
["top", "right"] | Elemen akan mengecil menuju kanan atas/membesar dari kanan atas | |
["bottom", "left"] | Elemen akan mengecil menuju kiri bawah/membesar dari kiri bawah | |
["bottom", "right"] | Elemen akan mengecil menuju kanan bawah/membesar dari kanan bawah |
$('div').toggle("scale", { origin: ["top", "left"] }, 1000);size
Efek ini akan mengubah ukuran elemen menurut opsi yang telah ditentukan.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| to | {width: 200, height: 300} // numerik | Ukuran elemen akan berubah sesuai dengan ukuran yang telah ditentukan |
{width: "50%", height: "20%"} // persentase | ||
{width: "50%", height: 300} // kombinasi |
$('div').effect("size", { to: { width: "50%", height: "20%" } }, 1000);shake
Elemen akan dikenai imbas goncangan. Jumlah goncangan dan arah goncangan sanggup ditentukan dalam opsi.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| times | 1, 2, 3, … | Menentukan jumlah goncangan |
| direction | "up" | Goncangan cenderung mengarah ke atas |
"down" | Goncangan cenderung mengarah ke bawah | |
"left" | Goncangan cenderung mengarah ke kiri | |
"right" | Goncangan cenderung mengarah ke kanan |
$('div').effect("shake", { times: 7 }, 1000);slide
Sepintas efeknya tampak sama dengan blind, tetapi bekerjsama ada sebuah perbedaan jikalau Anda memperhatikannya dengan teliti. blind akan menghilangkan elemen dimulai dari daerah awal gerakan, sedangkan slide akan menghilangkan elemen dimulai dari daerah terakhir gerakan:
| Opsi | Nilai | Deskripsi |
|---|---|---|
| direction | "up" | Bergeser ke atas |
"down" | Bergeser ke bawah | |
"left" | Bergeser ke kiri | |
"right" | Bergeser ke kanan |
$('div').toggle("slide", { direction: "left" }, 1000);transfer
Efek ini hanya dipakai untuk menawarkan bahwa sesuatu saling berkaitan. Saat sebuah agresi dilakukan, maka elemen seakan-akan akan menuju ke suatu daerah yang telah ditentukan. Target sanggup berupa objek elemen (kelas/ID) dalam selektor jQuery.
| Opsi | Nilai | Deskripsi |
|---|---|---|
| to | "#foo" | Elemen akan ditransfer menuju elemen dengan ID foo |
".bar" | Elemen akan ditransfer menuju elemen dengan kelas bar |
$('div').effect("transfer", { to: "#foo" }, 1000);