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

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