Cara Menggunakan Fungsi animate Pada jQuery
Selamat datang di artikel tips dan trik Source Code Aplikasi Cara Menggunakan Fungsi animate Pada jQuery, kembali lagi dengan saya Hernowo yang akan sedikit membahas mengenai manfaat .animate() didalam jQuery. Dimana manfaat ini bermanfaat bagi menggerakkan content dimana content dapat berupa text, image, format yang di bikin css dan lain-lain, di studi case kali ini kita akan membangun sebuah text dan kita atur dengan css kemudian kita akan tambahkan manfaat .animate() bagi menggerakkan sesuai command kita. Selain itu kita pun dapat memberikan css di pada jQuery bagi memberikan tambahan sentuhan agar tampilan sesuai apa yang kita inginkan.
Bagus, 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 manfaat .animate() di jquery</title>
</head>
<body>
<button id=run>» Run</button>
<div id=animate>cara menggunakan manfaat .animate() di jquery</div>
</body>
</html>
Lalu save dengan nama index.html, seperti yang kalian lihat di 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 pada jQuery. Langkah beriktunya tambahkan css nya
<style>
div {
background-color: orange;
width: 290px;
border: 1px solid gray;
}
</style>
Sekiranya telah save dan jalankan di browsernya, karenanya hasil sementara seperti gambar di bawah ini
Coba teman – teman klik tombol run, yang terjadi yaitu tak akan berubah apa – apa karena memang kita belum memberikan manfaat .animate() nya lanjut di artikel ini mengenai 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 dapat kunjungi halaman blog resminya di jQuery.com bagi mengambil library nya atau mengunduh jQuery nya bagi ofline, berikutnya kita berikan manfaat jQuery nya
<script>
$( #run ).click(function() {
$( #animate ).animate({
width: 70%,
marginLeft:200px,
padding:10px,
fontSize: 30px,
borderWidth: 10px
}, 1500 );
});
</script>
Sekiranya telah save dan refresh di browsernya, lalu klik button run karenanya text yang mempunyai background orange akan di .animate() oleh jQuery dimana didalam nya mempunyai ini css nya yang akan mengatur text. Sekiranya #run di klik karenanya akan menjalankan #animate yang akan di gerakkan oleh manfaat .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 di pengaturan css pertama-tama tak kembali seperti sedia kala, berikutnya kita kembalikan keposisi awalnya dengan menambahkan script ini
Karenanya 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 karenanya tampilan seandainya berhasil ketika #run di klik karenanya 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 bagi merubah ke posisi awal. Jadi seandainya di klik tombol run karenanya text bergeser kekanan dan kembali bergeser kekiri.
Lumayan gampang bukan..??
Bagus, mungkin sekianlah dulu di artikel kali ini mengenai Cara Menggunakan Fungsi animate Pada jQuery kita berjumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat, dan dapat menjadi tambahan ilmu pengetahuan bagi teman – teman yang khususnya baru belajar mengenai manfaat – manfaat di jQuery.
Terimakasih dan hingga jumpa.
Sumber https://kursuswebsite.org
