Cara Membuat Effect Animate Dengan Jquery
Di panduan kali ini sahabat akan belajar bagaimana Cara Merancang Effect Animate Dengan Jquery dengan cara praktek seketika menggunakan jquery.
Jquery ialah sebuah library yang bertujuan bagi memanipulasi sebuah HTML atau tampilan laman agar lebih terlihat menarik, jquery ini betul-betul amat bermanfaat bagi kebutuhan perancangan laman karena beragamnya animasi yang dapat di bikin oleh jquery.
Nah sekarang ini saya akan mengenalkan diantara effect di jquery yaitu Animate effect yang bermanfaat bagi memberikan animasi di sebuah halaman laman.
jadi ada sebuah button , lalu tujuannya ialah 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 bagi agar apabila tag button diklik karenanya akan mengerjakan petunjuk berikutnya.
$(‘button’).animate({‘left’:’+=50%’, ‘padding’:’20px’}, 5000); -> ini ialah petunjuk berikutnya setelah tag button di klik, dan sintak ini berfungsi bagi memberikan animasi kepada button tersebut berupa bergerak ke kiri sebesar 50% lalu padding 20px dengan durasi 5000 mili second atau sekitar 5 detik.
oke jadi demikianlah Cara Merancang Effect Animate Dengan Jquery , silahkan di kembangkan lagi dan hingga bertemu di artikel berikutnya.
terimakasih.
Sumber https://kursuswebsite.org
