Pada tutorial kali ini anda akan belajar bagaimana Cara Membuat Effect Animate Dengan Jquery dengan cara praktek langsung menggunakan jquery.
Jquery adalah sebuah library yang bertujuan untuk memanipulasi sebuah HTML atau tampilan website agar lebih terlihat menarik, jquery ini sangat amat berguna untuk keperluan pembuatan website karena beragamnya animasi yang bisa di buat oleh jquery.
Nah sekarang saya akan mengenalkan salah satu effect pada jquery yaitu Animate effect yang berguna untuk memberikan animasi pada sebuah halaman website.
jadi ada sebuah button , lalu tujuannya adalah bagaimana caranya button tersebut bergerak kalau kita klik.
Silahkan salin code berikut :
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button>Ini effect Animate</button>
<script type="text/javascript">
$('document').ready(function(){
$('button').css({'position':'absolute', 'left':'0'});
$('button').click(function(){
$('button').animate({'left':'+=50%', 'padding':'20px'}, 5000);
});
});
</script>
</body>
</html>
Saya akan jelaskan code di atas,
$(‘button’).click(function(){ -> ini berfungsi untuk agar jika tag button diklik maka akan melakukan perintah berikutnya.
$(‘button’).animate({‘left’:’+=50%’, ‘padding’:’20px’}, 5000); -> ini adalah perintah selanjutnya setelah tag button di klik, dan sintak ini berfungsi untuk memberikan animasi terhadap button tersebut berupa bergerak ke kiri sebesar 50% lalu padding 20px dengan durasi 5000 mili second atau sekitar 5 detik.
oke jadi itulah Cara Membuat Effect Animate Dengan Jquery , silahkan di kembangkan lagi dan sampai bertemu pada artikel selanjutnya.
terimakasih.