Membuat Animasi Dengan Jquery

Membuat animasi dengan jQuery.

Langkah-langkahnya:

1. Buka editor anda dapat menggunakan notepad++ atau menggunakan notepad yang sudah ada di dalam microsoft itu sendiri.
2. Copy-kan kode di bawah ini di notepad++/notepad.
3. Lalu simpan dengan nama "animasi.html" dan pilih "save as type : All types ".
4. Lalu buka file yang anda simpan dengan browser yang anda miliki.

<html>
<head><title>Animasi</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".mulai").click(function(){
$("#kotak").animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({top: '0px'}, 'slow').animate({left: '250px'}, 'slow')
.animate({top: '400px'}, 'slow').animate({top: '300px'}, 'slow')
.animate({left: '0px'}, 'slow').animate({top: '120px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({top: '0px'}, 'slow').animate({left: '250px'}, 'slow')
.animate({top: '400px'}, 'slow').animate({top: '300px'}, 'slow')
.animate({left: '0px'}, 'slow').animate({top: '120px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({top: '0px'}, 'slow').animate({left: '250px'}, 'slow')
.animate({top: '400px'}, 'slow').animate({top: '300px'}, 'slow')
.animate({left: '0px'}, 'slow').animate({top: '120px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({top: '0px'}, 'slow').animate({left: '250px'}, 'slow')
.animate({top: '400px'}, 'slow').animate({top: '300px'}, 'slow')
.animate({left: '0px'}, 'slow').animate({top: '120px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({top: '0px'}, 'slow').animate({left: '250px'}, 'slow')
.animate({top: '400px'}, 'slow').animate({top: '300px'}, 'slow')
.animate({left: '0px'}, 'slow').animate({top: '120px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({top: '0px'}, 'slow').animate({left: '250px'}, 'slow')
.animate({top: '400px'}, 'slow').animate({top: '300px'}, 'slow')
.animate({left: '0px'}, 'slow').animate({top: '120px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({top: '0px'}, 'slow').animate({left: '250px'}, 'slow')
.animate({top: '400px'}, 'slow').animate({top: '300px'}, 'slow')
.animate({left: '0px'}, 'slow').animate({top: '120px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow')
.animate({top: '0px'}, 'slow').animate({left: '250px'}, 'slow')
.animate({top: '400px'}, 'slow').animate({top: '300px'}, 'slow')
.animate({left: '0px'}, 'slow').animate({top: '0px'}, 'slow')
.animate({left:'250px'}, 'slow').animate({left:'0px'}, 'slow');
});
});
</script>
<style type="text/css">
#kotak{
position: relative;
width: 100px;
height: 100px;
background: red;
}
</style>

</head>
<body>
<input type="button" class="mulai" value="start">
<div id="kotak">
</div>
</body>

</html>

Semoga Bermanfaat, Terima Kasih.

Situs Resmi IKA4 Bekasi
Forum IKA4 Bekasi

@maja_dzainal
ym : maja.dzainal