Easing jQuery

BAB 1: Pengertian

Plugin Easing jQuery digunakan untuk memanipulasi langkah animasi dalam jQuery yang biasanya didominasi oleh easing 'linear' dan 'swing'. Dengan menerapkan easing, maka langkah-langkah animasi dapat dimanipulasi sedemikian rupa sehingga menjadi jauh lebih hidup.

Sebagai gambaran awal, kamu bisa melihat contoh modelnya di sini:

Lihat Contoh

Seperti yang telah kamu lihat, bahwa efek animasi pada contoh ke dua tampak jauh lebih hidup dibandingkan dengan contoh pertama. Pada contoh ke dua yang Saya buat, Saya memakai easing easeInBack untuk efek penutupannya dan easeOutBounce pada efek pembukaannya.

Pembagian langkah easing (untuk saat ini) dapat dibagi menjadi tiga, yaitu easeIn, easeOut dan easeInOut. Setelah itu akan diikuti dengan tipe easingnya.easeIn cenderung memulai animasi dari klimaksnya terlebih dahulu, berbeda dengan easeOut yang akan memunculkan klimaks animasi pada akhir waktu. easeInOut akan memunculkan klimaks animasi pada awal dan akhir waktu.

Terdapat 10 tipe percepatan dalam paket easing 1.3 yaitu Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back dan Bounce. linear dan swing sebenarnya juga termasuk tipe easing, namun meski tanpa menambahkan plugin easing jQuery, efek easing linear dan swing tetap bisa dibuat karena kedua tipe easing tersebut merupakan bawaan dari jQuery. Jika semua tipe dan langkah easing digabungkan, maka akan menghasilkan 32 macam easing seperti ini:

• linear
• swing
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

Untuk memahami efeknya secara langsung, lihat demo-demo langkah easingnya di sini:

Demo Easing jQuery

BAB 2: Dasar Penggunaan

Ada dua metode penerapan tipe easing dalam efek animasi. Secara umum dapat dituliskan dengan mudah di samping durasi animasi seperti ini:

Tanpa Easing	Dengan Easing
.show(5000)	.show(5000, "easeInBack")
.hide(5000)	.hide(5000, "easeInBack")
.slideDown(5000)	.slideDown(5000, "easeInBack")
.slideUp(5000)	.slideUp(5000, "easeInBack")
.fadeIn(5000)	.fadeIn(5000, "easeInBack")
.fadeOut(5000)	.fadeOut(5000, "easeInBack")
.fadeTo(5000)	.fadeTo(5000, "easeInBack")
.toggle(5000)	.toggle(5000, "easeInBack")
.slideToggle(5000)	.slideToggle(5000, "easeInBack")
.fadeToggle(5000)	.fadeToggle(5000, "easeInBack")

Atau dengan penulisan yang sedikit lebih rumit seperti ini:

Tanpa Easing	Dengan Easing
.slideUp(1000);	.slideUp({duration: 1000, easing: "easeInBack"});
.animate({color: "#f10c0c"}, 1000);	.animate({color: "#f10c0c"}, {duration: 1000, easing: "easeInBack"});

Pada efek .animate(), nama easing tidak bisa diterapkan secara langsung , jadi kamu harus menggunakan metode yang ke dua untuk menerapkan easing pada efek .animate().

Pembaharuan: 27 Februari 2012

Easing pada .animate() sudah bisa diterapkan menggunakan cara biasa:

$('#elemen').animate({height:"toggle"}, 1000, "easeInOutExpo");

Penerapan Secara Keseluruhan

Tambahkan plugin easing jQuery di dalam template, kemudian barulah deklarasi easing dapat bekerja:

<script src='... /jquery.js'></script>
<script src='... /jquery-easing-1.3.pack.js'></script>
<script>
$(document).ready(function() {
    $('#pemicu').click(function() {
        $('#target').slideToggle(1000, "easeInBack");
    });
});
</script>

Referensi

• JQueryUI Easing Demos
• jQuery Easing Plugin (version 1.3)
• Unduh Plugin Easing 1.3