Seperti yang kita ketahui, JQuery memiliki kemampuan untuk memberi maupun mengurangi class pada elemen HTML. Saat ini saya akan mencoba memberi class pada suatu div sehingga div tersebut dapat bergerak sesuai dengan event yang dilakukan oleh button. contoh gambarnya seperti ini :
Berikut ini adalah contoh kode nya :
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".kotak").toggleClass("gerak");
});
});
</script>
<style type="text/css">
.gerak{
animation: 5s;
margin-left:300px;
}
.kotak{
margin-top:20px;
height:100px;
width:100px;
background:yellow;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
</head>
<body>
<button>Start Animation</button>
<div class="kotak">
test
</div>
</body>
</html>
ohhh salah di buttonya ane gan.. thx dah di share
BalasHapus