Efek-Efek jQuery UI

Mengingat bahwa jQuery UI adalah plugin, maka sintaks jQuery UI tidak sama dengan sintaks efek dalam jQuery. Bisa dibilang, jQuery UI hanya menyisipkan dirinya di dalam efek jQuery yang umum digunakan.

.show(), .hide() dan .toggle() adalah tiga bagian pokok yang akan selalu Anda pakai saat menjalankan efek jQuery UI. Selain itu ada satu lagi fungsi khusus untuk jQuery UI yaitu .effect()

Berbeda dengan .show(), .hide() dan .toggle() yang dapat mengubah visibilitas elemen, .effect() hanya berfungsi untuk membantu jQuery UI menjalankan animasi tanpa mengubah visibilitas elemen. (Biasanya digunakan untuk efek-efek emosional yang tidak memerlukan penghilangan/pemunculan elemen).

Dasar Penggunaan 

Saat Anda menyembunyikan elemen dengan fungsi .hide(), maka Anda akan menuliskannya seperti ini:

$('div').hide(1000);

Sekarang Anda ingin menambahkan efek blind pada elemen yang akan Anda sembunyikan, maka Anda bisa menambahkan efek jQuery UI dengan cara seperti ini:

$('div').hide("blind", 1000);

Setiap efek memiliki beberapa opsi di dalamnya. Misalnya, secara default efek blind akan menutup elemen secara horizontal. Jika Anda ingin menciptakan efek penutupan secara vertikal, Anda tinggal menentukan opsi direction: "vertical" pada parameter opsi. Bagian opsi dibuat setelah nama efek dan dikelompokkan di dalam braket objek:

$('div').hide("blind", {
    direction: "vertical"
}, 1000);

Hal yang sama juga bisa dilakukan untuk .show(), .toggle() dan .effect(). .effect() hanya berguna jika diterapkan pada efek-efek emosional yang tidak memerlukan perubahan visibilitas elemen.

$('div').hide(durasi);

$('div').hide("nama_efek", {opsi1, opsi2, opsi3}, durasi);

Lihat Semua Demo 

Lihat semua efeknya terlebih dahulu sebelum mempelajari ini:

Lihat Demo

Efek-Efek jQuery UI 

blind 

Efek jQuery UI ini tidak jauh berbeda dengan .slideDown() dan .slideUp(). Keistimewaannya adalah dapat diarahkan secara horizontal. Sesuatu yang selama ini tidak bisa dilakukan oleh .slideDown() dan .slideUp()

$('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.

$('div').effect("bounce", {
    direction: "up",
    times: 10
}, 1000);

clip 

Efek ini akan menutup elemen menuju garis pusat atau membuka elemen dari garis pusat.

$('div').toggle("clip", {
    direction: "horizontal"
}, 1000);

drop 

Efek ini akan menampilkan/menyembunyikan elemen dengan efek memudar bersamaan dengan perubahan letak sesuai dengan direksinya.

$('div').hide("drop", {
    direction: "up"
}, 1000);

explode 

Ini adalah efek favorit Saya. Efek ini akan meledakkan elemen!

$('div').hide("explode", {
    pieces: 36
}, 1000);

fold 

Elemen akan dikenai efek melipat. Batas akhir lipatan bisa ditentukan dalam opsi. Default arah lipatan adalah vertikal kemudian horizontal.

$('div').hide("fold", {
    size: 10
}, 1000);

highlight 

Elemen akan dikenai efek sorotan. Warna sorotan bisa ditentukan dalam opsi. Efek bisa berupa sorotan saja atau berupa sorotan kemudian menghilangkannya.

$('div').effect("highlight", {
    color: "#990000",
    mode: "hide"
}, 1000);

pulsate 

Elemen akan dikenai efek berdenyut. Jumlah denyutan bisa ditentukan dalam opsi.

$('div').effect("pulsate", {
    times: 2
}, 1000);

puff 

Elemen akan dikenai efek embusan (membesar dan memudar). Besar elemen dapat ditentukan dalam opsi (persentase).

$('div').hide("puff", {
    percent: 300
}, 1000);

scale 

Efek ini akan menutup elemen dengan efek mengecil/membuka elemen dengan efek membesar.

$('div').toggle("scale", {
    origin: ["top", "left"]
}, 1000);

size 

Efek ini akan mengubah ukuran elemen berdasarkan opsi yang telah ditentukan.

$('div').effect("size", {
    to: {
        width: "50%",
        height: "20%"
    }
}, 1000);

shake 

Elemen akan dikenai efek goncangan. Jumlah goncangan dan arah goncangan dapat ditentukan dalam opsi.

$('div').effect("shake", {
    times: 7
}, 1000);

slide 

Sepintas efeknya tampak sama dengan blind, tetapi sebenarnya ada sebuah perbedaan jika Anda memperhatikannya dengan teliti. blind akan menghilangkan elemen dimulai dari tempat awal gerakan, sedangkan slide akan menghilangkan elemen dimulai dari tempat terakhir gerakan:

$('div').toggle("slide", {
    direction: "left"
}, 1000);

transfer 

Efek ini hanya digunakan untuk menunjukkan bahwa sesuatu saling berkaitan. Saat sebuah aksi dilakukan, maka elemen seolah-olah akan menuju ke suatu tempat yang telah ditentukan. Target bisa berupa objek elemen (kelas/ID) dalam selektor jQuery.

$('div').effect("transfer", {
    to: "#foo"
}, 1000);