Twitter Facebook Delicious Digg Stumbleupon Favorites More

23/01/17

Membuat Animasi Sederhana Dengan Jquery

Jquery



Membuat animasi dengan jQuery.



Langkah-langkahnya:

hasil
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.

Share:

0 comments:

Posting Komentar

Cari Di Blog Ini

Menerima Jasa

Iklan

Diberdayakan oleh Blogger.
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS

TentangIT

Copyright © Tentang IT | Powered by Blogger
Design by SimpleWpThemes | Blogger Theme by NewBloggerThemes.com & Distributed By Protemplateslab