Fungsi Animate pada Jquery

Animate pada Jquery adalah salah satu fitur yang dapat kalian pergunakan dalam membangun website dengan lebih interaktif. Karena pada dasarnya Jquery digunakan untuk membuat suatu tampilan website menjadi dinamis. Sesuai dengan pembahasan kita kali ini, kita akan belajar bagaimana cara kerja fungsi animate pada Jquery. Animate ini akan memberikan suatu gerakan dengan transisi sehingga seolah-olah gerakan tersebut terlihat mulus. Sehingga orang yang melihatnya akan menganggap ini adalah suatu animasi sederhana.

Untuk membuat animasi sederhanan ini kalian cukup mempelajari dasar HTML, CSS dan Javascript/Jquery saja. Karena semuanya itu saling berhubungan satu sama lain. Oke untuk lebih jelasnya kalian bisa langsung mempraktekkanya. Untuk mempersingkat waktu kalian bisa langsung salin contoh animate berikut ini. Contoh code ini adalah bagaimana kita membuat animasi box sederhan, yang apabila kalian menekan tombol maka box tersebut akan berpindah dari satu tempat ke tempat lainya sesuai dengan arahan animasi yang telah diberikan.

animate.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '500px',top:'400px'});
    });
});
</script> 
</head>
<body>

<button>Animasi</button>

<div style=" background: #98bf21; height: 100px; width: 100px; position: absolute; top:100px;"></div>

</body>
</html>

Setelah sudah kalian simpan file tersebut dengan format html. Untuk melihat hasilnya kalian cukup membuka file tersebut pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

fungsi-animate-pada-jquery-rangga1-071017

Gambar diatas adalah tampilan awal, gambar kotak hijau tersebut adalah objek yang akan kita berikan fungsi animate sehingga akan terjadi perubahan gerakan. Perubahan gerakanya akan terjadi saat kita tekan tombol diatas kotak hijau. Sekarang kalian bisa coba tekan dan lihat apa yang terjadi.

fungsi-animate-pada-jquery-rangga2-071017

Gambar kotak tersebut akan pindah sesuai dengan perintah animatenya. Dengan gerakan transisi akan menambah kesan smooth pada gerakan kotak tersebut. Kalian bisa buat animasi yang lebih kompleks dan disesuaikan dengan website kalian. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara kerja fungsi animate pada Jquery. Semoga artikel kali ini bermanfaat dan menginspirasi kalian semua. Sampai jumpa pada pembahasan menarik lainya hanya di Dumet School ! .

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *