Contoh Efek Efek Jquery UI

Jquery User Interface ( UI ) merupakan plugin tambahan dari jquery sebagai pengembangan javascript yang dirangkum sedemikian rupa untuk lebih mudah di gunakan dalam pengembangan website/blog. Kita hanya memerlukan sedikit kode untuk menghasilkan efek yang mengagumkan sesuai perkembangan website saat ini layaknya blog gaya metro ui style.

• DEMO

Install Jquery UI

<link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Dibawah ini adalah contoh perintah untuk menjalankan efek dengan JQuery UI :

BLIND

$('#object').toggle("blind", {
    direction: "horizontal"
}, 1000);

BOUNCE

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

CLIP

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

DROP

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

EXPLODE

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

FOLD

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

PULSATE

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

PUFF

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

SCALE

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

SIZE

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

SHAKE

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

SLIDE

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

TRANSFER

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

PENTING...!!!

Contoh perintah Jquery

$('#object').hide(durasi);

Setelah menggunakan Jquery UI

$('#object').hide("Efect", {opsi1, opsi2, opsi3}, durasi);

Object     : Obyek yang ingin dieksekusi
Efect       : Nama efek untuk menampilkan dengan JQuery UI
Opsi        : Tambahan perintah dengan nilai value misalnya (direction, times, size,width dsb)

Silakan berkreasi dan bermain - main dengan Jquery Ui ini agar tampilan blog lebih maksimal, sesuai slogan blog metro ui style.
Enjoy Blogging