Efek-Efek jQuery UI

Tabel Konten
  1. Dasar Penggunaan 
    1. jQuery 
    2. jQuery UI 
  • Lihat Semua Demo 
  • Efek-Efek jQuery UI 
    1. blind 
    2. bounce 
    3. clip 
    4. drop 
    5. explode 
    6. fold 
    7. highlight 
    8. pulsate 
    9. puff 
    10. scale 
    11. size 
    12. shake 
    13. slide 
    14. transfer 
  • 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()

    OpsiNilaiDeskripsi
    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.

    OpsiNilaiDeskripsi
    times1, 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.

    OpsiNilaiDeskripsi
    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.

    OpsiNilaiDeskripsi
    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!

    OpsiNilaiDeskripsi
    pieces1, 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.

    OpsiNilaiDeskripsi
    size1, 2, 3, …Menentukan batas terkecil lipatan (default: 15)
    "10%", "50%"
    horizFirsttrueMenentukan 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.

    OpsiNilaiDeskripsi
    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.

    OpsiNilaiDeskripsi
    times1, 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).

    OpsiNilaiDeskripsi
    percent300, 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.

    OpsiNilaiDeskripsi
    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.

    OpsiNilaiDeskripsi
    to{width: 200, height: 300} // numerikUkuran 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.

    OpsiNilaiDeskripsi
    times1, 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.
    OpsiNilaiDeskripsi
    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.

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

    13 Komentar

    • Unknown

      demonya keren banget \o/ TAPI gak ngerti penerapannya gimana mas -_-"

    • azewBz

      \o/ wew`baru keliatan tutorial kaya gini..!!
      Ijin share tambah sumber asli di sini :Q

    • IRIL SAGITA

      kak Taufik, aku punya proyek seperti ini :
      $('.kontak').click(function() {
      $("#top-ribb").stop().animate({right:"20%"}, 500, function() {
      $("#top-ribb").stop().animate({top: -350}, 500, function() {
      $("#main-inner").fadeOut (1000, function() {
      $("#main-wrap").slideUp(500, function() {
      $("#main-wrap").slideDown(1000, function() {
      $("#form-kontak").fadeIn (1000)
      })
      })
      })
      })
      })
      })

      Ingin menerapkan seperti ini :

      $('.kontak').click(function() {
      $("#top-ribb").stop().animate({right:"20%"}, 500, function() {
      $("#top-ribb").stop().animate({top: -350}, 500, function() {
      $("#main-inner").fadeOut (1000, function() {
      $("#main-wrap").hide("blind", {direction:"vertical"}, 1000, function() {
      $("#main-wrap").show("blind", {direction:"vertical"}, 1000, function() {
      $("#form-kontak").fadeIn (1000)
      })
      })
      })
      })
      })
      })

      supaya main-wrap tertutup dengan efek blind vertical, tapi aku coba ulang-ulang gak ketemu caranya kak, apakah code yang aku buat itu salah, atau penerapannya yang kliru, saat ini code yang pertama saya terapkan di sagitasoft.com, mohon bantuannya kak ?

      • IRIL SAGITA

        Atau begini juga tidak berfungsi kak :
        $('.kontak').click(function() {
        $("#top-ribb").stop().animate({right:"20%"}, 500,
        function() { $("#top-ribb").stop().animate({top: -300}, 500,
        function() { $("#main-wrap").toggle("slide", {direction:"Up"}, 1000,
        function() { $("#main-inner").fadeOut (1000,
        function() { $("#main-wrap").toggle("slide", {direction:"Down"}, 1000,
        function() { $("#form-kontak").fadeIn (1000)
        })
        })
        })
        })
        })
        })

        Tapi proyek saya dengan cara pertama kok berfungsi ya, tolong bantuannya ya kak ?

      • Taufik Nurrohman

        Selama JQuery UI tidak/belum diinstal, efek-efek seperti blind, explode, slide dan yang lainnya seperti yang Saya jelaskan di atas, tidak akan mungkin bisa bekerja. Malah akan membuat animasi menjadi error.

        • IRIL SAGITA

          Bener banget kak, ternyata masalahnya di JQuery UI nya belum saya masukkan, makasih banyak ?

    • Sikkahoder

      SAYA GAK TAHU MAU KOMENTAR APA LAGI TERLALU MASTER.... BANG SY BISA PESAN DI EDITIN TAMPLE GAK??? BERAPA HARGANYA???

      • Taufik Nurrohman

        Tergantung tingkat kesulitan, pak. Mungkin lebih baik dikomunikasikan lewat email saja. Terima kasih.

    • Unknown

      Mas mau nanya nih mas. kalau misalkan kita buat animasi, pada saat klik elemen dikenai efek, namun pada saat tombol ditutup, elemen tersebut kembeli kesedia awal, seperti tidak dikenai efek sama sekali.
      contohnya begini.
      $(".search-form").delay(1500, "easeInOutElastic").animate({ top: -100 })
      saat animasi berjalan, maka .search-from dikenai efek top: -100 padahal dipengaturan css .search-form top:65px.
      saya memakai begini sebagai penggantinya:
      $(".search-form").delay(1500, "easeInOutElastic").animate({ top: 65 })
      agar .search-form kembali kesedia awal.
      Pertanyaannya:
      1. Bagaimana caranya supaya semua animasi tersebut berhenti ketika mengklik tombol close??
      tanpa menggunakan yang seperti ini:
      $(".search-form").delay(1500, "easeInOutElastic").animate({ top: 65 })

      2. Mohon jawabannya yah mas. :(
      3. Terimakasih.

      • Taufik Nurrohman

        $('.close').click(function() {
        $('.search-form').stop().removeAttr('style');
        });
        • Unknown

          terimakasih mas jawabannya. :)

    • Unknown

      Mohon penjelasannya kak... apakah jquery-ui dapat bekerja pada Id yang mempunyai url . seperti contohnya hal : saya mengklik DAFTAR ISI setelah itu muncul Main-wrapper yang tergulung tanpa proses loading lagi. mungkin seperti Tombol "TENTANG"nya Mas Taufik.

    Komentar telah ditutup.