Membuat Animasi Berjalan dengan JQUERY


$(document).ready(function(){
$(“.mulai”).click(function() {
$(“#kotak”).animate({ left: “400” }, “slow”)
.animate({ top: “-160”, height: “200”, width: “200”}, “slow”)
.animate({ left: “0”, height: “100”, width: “100”}, “slow”)
.animate({ top: “0”}, “slow”)
.slideUp()
.slideDown(“slow”);
});
});

#kotak {
position: relative;
width: 100px;
height: 100px;
background: red;
}

Membuat Efek Buka Tutup Gambar/Foto Dengan JQuery


 

<html>
<head>
<script type=”text/javascript” src=”jquery-1.4.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.mulai”).click(function() {
$(“#kotak”).animate({ left: “400” }, “slow”)
.animate({ top: “-160”, height: “200”, width: “200”}, “slow”)
.animate({ left: “0”, height: “100”, width: “100”}, “slow”)
.animate({ top: “0”}, “slow”)
.slideUp()
.slideDown(“slow”);
});
});
</script>
<style type=”text/css”>
#kotak {
position: relative;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body><br /><br /><br /><br /><br /><br /><br /><br />
<button>Jalankan</button><br /><br />
<div id=”kotak”></div>
</body>
</html>