Halo teman-teman, berjumpa lagi dengan saya. Di artikel kemarin kita sudah  membuat beberapa fungsi yang ada pada Jquery, di artikel kali ini kita akan membuat animasi sederhana dengan metode .animate() yang ada pada Jquery. Baik langsung saja teman-teman buka code editornya lalu copy script di bawah ini

Lalu pastekan di code editornya, kemudian save dengan index.html dan run pada browsernya. Maka akan menghasilkan output seperti gambar di bawah ini,

hasil-jadi

Langkah selanjutnya berikan display:none pada css tag <h1> dan berikan z-index:-1; pada gambar panah, atau bisa lihat gambar di bawah ini

code

Lalu berikan library jquery nya di dalam tag <head>

Kemudian tambahkan script di bawah ini tepat di bawah library Jquery nya.

Jika sudah di save dan refresh pada browsernya, maka animasi yang kita buat sudah jadi. Gambar panah akan di aktifkan oleh Jquery yang mempunyai fungsi .animate() untuk melakukan animasi mines -50px kekiri, artinya panah akan mundur sebanyak 50px dan akan memanah sejauh 1510px kemudian baru akan menampilkan <h1> dengan menambahkan fungsi .fadeIn() yang sebelumnya kita berikan display:none;

Maka jika panah sudah melakukan animate sejauh 1510px <h1> akan tampil yang di dalamnya memiliki value “Mangga Kuning”, cukup mudah kan teman-teman. Baik sekian dulu dari saya pada artikel kali ini tentang Membuat Animasi Sederhana Dengan Jquery mudah-mudahan bisa menjadi tambahan pengetahuan untuk teman-teman yang khususnya baru mempelajari fungsi-fungsi dari Jquery. Teman-teman juga bisa ya memodifikasinya dari contoh di atas supaya lebih mahir, sampai jumpa di artikel selanjutnya dan terimakasih. Semoga bermanfaat