Contoh memunculkan Animasi Sederhana dengan Jquery

easing adalah efek yang sangat khusus ditambahkan ke animasi jQuery. Alih-alih sebuah transisi tunggal stabil, adalah mungkin untuk membuat animasi atau memperlambat kecepatan di akhir, atau bahkan bouncing. Untungnya Anda tidak perlu tahu bagaimana ini bekerja, karena Anda hanya dapat menggunakan plugin Easing


Mempermudah dilewatkan sebagai yang kedua untuk argumen terakhir untuk jQuery.animate (), atau argumen terakhir jika ada callback no.

contohnya sebagai berikut :

Show Code

 
$(document).ready(function() {
    $("#clickhere").click(function() {
        $("#animate1").animate({
            width: "200px"
        }, 1000, "easeOutSine");
        $("#animate2").animate({
            width: "200px"
        }, 2000, "easeOutExpo");
        $("#animate3").animate({
            width: "200px"
        }, 3000, "easeOutBounce");
    });
});

silahkan dicoba dan diterapkan.

untuk slidenya berikut source codenya : 

<div id="animate1" style="background: red; border: 1px solid white; height: 40px; width: 100px;">
</div>
<div id="animate2" style="background: blue; border: 1px solid white; height: 40px; width: 100px;">
</div>
<div id="animate3" style="background: green; border: 1px solid white; height: 40px; width: 100px;">
</div>
<input id="clickhere" type="button" value="Click Me!" />

kalau ada kurang mohon bimbingannya dan kasih tau bila ada kurang2nya :D