Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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.

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:

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()

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 pusat atau membuka elemen dari garis pusat.

Opsi Nilai Deskripsi
direction "horizontal" Membuka/Menutup elemen dengan gerakan horizontal (garis pusat berupa garis vertikal)
"vertical" Membuka/Menutup elemen dengan gerakan vertikal (garis pusat berupa garis horizontal)
$('div').toggle("clip", {
    direction: "horizontal"
}, 1000);

drop

Efek ini akan menampilkan/menyembunyikan elemen dengan efek 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 adalah efek favorit Saya. Efek ini akan meledakkan elemen!

Opsi Nilai Deskripsi
pieces 1, 2, 3, … Menentukan jumlah potongan (default: 9)
$('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.

Opsi Nilai Deskripsi
size 1, 2, 3, … Menentukan batas terkecil lipatan (default: 15)
"10%", "50%"
horizFirst true Menentukan apakah efek akan dimulai dari horizontal terlebih dahulu atau vertikal terlebih dahulu
false
$('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.

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 setelah elemen dikenai sorotan akan menghilang atau tetap seperti apa adanya (default: show)
"hide"
$('div').effect("highlight", {
    color: "#990000",
    mode: "hide"
}, 1000);

pulsate

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

Opsi Nilai Deskripsi
times 1, 2, 3, … Menentukan banyaknya denyutan
$('div').effect("pulsate", {
    times: 2
}, 1000);

puff

Elemen akan dikenai efek embusan (membesar dan memudar). Besar elemen dapat 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 efek mengecil/membuka elemen dengan efek 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 berdasarkan 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 efek goncangan. Jumlah goncangan dan arah goncangan dapat 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 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:

jQuery UI - Effect
Perbedaan Blind dengan Slide.
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 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.

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);

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 13 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!