Easing jQuery

Tabel Konten
  1. BAB 1: Pengertian 
  2. BAB 2: Dasar Penggunaan 
  3. Penerapan Secara Keseluruhan 
  4. Referensi 
jquery easing plugin

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 EasingDengan 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 EasingDengan 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 

15 Komentar

  • Unknown

    aku nyimak dulu gan

  • iam

    Gila kereen abis efek jquery-nya :D
    Kalau untuk theme blog, diterapin dimana ya? :D

  • Unknown

    gan mau tanya.. klo pengen buat ease outbounce jumlah kategori seperti di blog ini gmna...
    di terapkannya sebelah mana...??

  • Taufik Nurrohman

    @Denddy GustianaIntinya, pertama-tama Saya memindah elemen jumlah posting yang tadinya berada di luar <a> menjadi di dalam <a> seperti ini:

    Sebelum: <li><a href="#">Nama Label</a> <span class="label-count">(77)</span></li>
    Sesudah: <li><a href="#">Nama Label <span class="label-count">(77)</span></a></li>

    Dalam widget Label bentuknya sedikit berbeda, tapi pada intinya kerangkanya sama persis. Ambil saja patokan tag HTML-nya:

    Ubah kode ini:
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'><data:label.count/> Artikel</span>
    </b:if>
    </b:if>
    </li>
    </b:loop>
    </ul>

    Menjadi seperti ini:
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'><data:label.count/> Artikel</span>
    </b:if>
    </a>
    </b:if>
    </li>
    </b:loop>
    </ul>

    Nah, karena sekarang elemen jumlah posting sudah berada di dalam tag <a>, maka penanganan menjadi lebih mudah. Kira-kira seperti ini:

    $('#ID-WIDGET-LABEL li a').hover(function() {
    $('span.label-count',this).slideDown(500,'easeOutBounce');
    },function() {
    $('span.label-count',this).fadeOut(400,'easeOutQuart');
    });

    Tentunya ini juga harus dipadukan dengan CSS Position supaya elemen span.label-count bisa tampak melayang.

  • Randy

    keren2 bang ajibbb

  • Putra

    @Taufik Nurrohman boleh saya share nih pak Taufik? ;)

  • Taufik Nurrohman

    @Alam Perwira Asal ada sumbernya tidak masalah :-bd

  • Unknown

    saya mau tanya mas,, cara msang efek yang easing di tab sidebar bagaimana?
    yang bisa ane pasang cuma .FadeToogle. kalo yg lain ga bisa.
    ini kode tab'a udah saya pasangin fadetoogle.

    
    $(document).ready(function(){
    $('#bungkusside > div').hide();
    $('#bungkusside > div:first').show();
    $('#tebslect li:first').addClass('selected');
    $('#tebslect li').click(function(){
    $('#tebslect li').removeClass('selected');
    $(this).addClass('selected');
    $('#bungkusside > div:visible').hide();
    $('#bungkusside > div').eq($('#tebslect li').index(this)).fadeToggle(4000)
    return false;
    });
    });
    
    • Unknown

      bisa cek di mdf-blog.blogspot.com

  • you

    mas maaf sebelumnya kalo sering nanya... saya menggunakan ini $(document).ready(function () {
    $('.emo').click(function () {
    $('.tanda').animate({
    top: "85%"
    }, {
    duration: 5000,
    easing: "easeOutQuart"
    });
    $('.tooltipsemot').fadeIn(5000, "easeInBack")
    });
    $('.link-close').click(function () {
    $('.tooltipsemot').hide(1000);
    $('.tanda').animate({
    top: "0px"
    }, {
    duration: 5000,
    easing: "easeOutQuart"
    });
    });
    });

    bisakah agar elemen .tanda dibuat melayang tetap ditengah meskipun scroll di kebawah atau dike ataskan. terima kasih sebelumnya..

  • Unknown

    Mantap nih mas, namun masih belum paham betul, share sesuatu lagi donk tentang jquery-ui ini. :D

  • Unknown

    cobain gan yang tanpa jQuery , hanya pake CSS
    http://www.hadinug.net/post/1398707179/animasi-dengan-css-try-and-run-.html

Komentar telah ditutup.