Menggunakan CSS transition dengan jQuery

Untuk menggunakan CSS transition dalam praktek, Kita akan membutuhkan beberapa fungsi pembantu untuk menangani pengaturan dan unsetting sifat transition, penanganan panggilan balik penyelesaian dan menghentikan animasi. Sebelum itu, berikut ini sudah ada script dari sebuah plugin jQuery yang cepat yang memungkinkan kita untuk melakukan hal itu

Menggunakan css transition dengan jquery sangat sederhana :

// Makes all paragraph elements grow a border and then atrophy away.

$("p").animateWithCSS(

{border: "5px solid #555"}, // CSS properties to animate

1000,                       // Duration in ms

"cubic-bezier",             // The timing function

function(){                 // Callback

$("p").animateWithCSS({border: "0px"}, 350);

}

);

Hasil sebelum Diklik animate :

Sesudah Di Dklik :

Jadi saat di dklik animate saat pertama kali warna dasar putih dan akan berubah menjadi merah saat menuju ke kanan, begitu juga sebaliknya, saat box berada disebelah kanan dan berwarna merah, saat di klik animate lagi akan berjalan ke kiri dan seiring perjalanan itu warna merah akan berubah menjadi putih.

Share on Google Plus

About Rendy Dwi Prastyo

Just Personal Web Blog, Programming, Blogging, Internet, Books, Tutorial, Black And White, Anime,Gamers, News.