Selamat datang di artikel tips dan trik Dumet School Cara Menggunakan Fungsi animate Pada jQuery, kembali lagi dengan saya Hernowo yang akan sedikit membahas tentang fungsi .animate() didalam jQuery. Dimana fungsi ini berguna untuk menggerakkan content dimana content bisa berupa text, image, bentuk yang di buat css dan lain-lain, pada studi case kali ini kita akan membuat sebuah text dan kita atur dengan css kemudian kita akan tambahkan fungsi .animate() untuk menggerakkan sesuai perintah kita. Selain itu kita juga bisa memberikan css di dalam jQuery untuk memberikan tambahan sentuhan agar tampilan sesuai apa yang kita inginkan.
Baik, teman – teman siapkan text editornya lalu copy script html nya di bawah ini
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>cara menggunakan fungsi .animate() pada jquery</title>
</head>
<body>
<button id="run">» Run</button>
<div id="animate">cara menggunakan fungsi .animate() pada jquery</div>
</body>
</html>
Lalu save dengan nama index.html, seperti yang kalian lihat pada script html ini saya mempunyai tag button yang mempunyai id dan div yang mempunyai id dimana id tersebut yang akan mewakili dari tag tersebut yang akan kita atur di dalam jQuery. Langkah beriktunya tambahkan css nya
<style>
div {
background-color: orange;
width: 290px;
border: 1px solid gray;
}
</style>
Jika sudah save dan jalankan pada browsernya, maka hasil sementara seperti gambar di bawah ini
Coba teman – teman klik tombol run, yang terjadi adalah tidak akan berubah apa – apa karena memang kita belum memberikan fungsi .animate() nya lanjut pada artikel ini tentang Cara Menggunakan Fungsi animate Pada jQuery berikan library jQuery nya terlebih dahulu
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Atau teman – teman bisa kunjungi halaman website resminya di jQuery.com untuk mengambil library nya atau mendownload jQuery nya untuk ofline, berikutnya kita berikan fungsi jQuery nya
<script>
$( "#run" ).click(function() {
$( "#animate" ).animate({
width: "70%",
marginLeft:"200px",
padding:"10px",
fontSize: "30px",
borderWidth: "10px"
}, 1500 );
});
</script>
Jika sudah save dan refresh pada browsernya, lalu klik button run maka text yang mempunyai background orange akan di .animate() oleh jQuery dimana didalam nya mempunyai ini css nya yang akan mengatur text. Jika #run di klik maka akan menjalankan #animate yang akan di gerakkan oleh fungsi .animate() dan akan berubah sesuai css di dalamnya diantaranya width menjadi 70%, marginLeft:200px, padding:10px, fontSize:30px dan borderWidth:10px artinya text akan di atur oleh css nya namun ketika run di klik text akan stuck pada pengaturan css pertama tidak kembali seperti sedia kala, berikutnya kita kembalikan keposisi awalnya dengan menambahkan script ini
Maka dengan menambahkan script seperti gambar di atas ini yang saya beri kotak berwarna merah akan mengatur text ke posisi awal, coba teman – teman ikuti seperti gambar di atas ini maka tampilan jika berhasil ketika #run di klik maka akan di jalankan #animate yang akan di atur oleh .animate() yang di dalamnya mempunyai css yang akan merubah text tersebut dan di kondisi ke dua yang mempunyai css untuk merubah ke posisi awal. Jadi jika di klik tombol run maka text bergeser kekanan dan kembali bergeser kekiri.
Cukup mudah bukan..??
Baik, mungkin sekian dulu pada artikel kali ini tentang Cara Menggunakan Fungsi animate Pada jQuery kita berjumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat, dan bisa menjadi tambahan ilmu pengetahuan untuk teman – teman yang khususnya baru belajar tentang fungsi – fungsi pada jQuery.
Terimakasih dan sampai jumpa.