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

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku