공부하는 징뉴/퍼블
제이쿼리 easing이랑 transform...
J.Riley
2019. 1. 21. 21:14
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="./jquery.transform2d.js"></script>
<script src="./jquery.easing.1.3.js"></script>
<style>
#box{
width:300px;
height:300px;
background-color:salmon;
}
</style>
<script>
$(function(){
$("button").click(function(){
$("#box").animate({
"background-color":"green",
"transform":"rotate(540deg)",
"margin-top":"50px",
"margin-left":"200px"
},3000,"easeInBounce");
});
});
</script>
</head>
<body>
<button>move</button>
<div id="box"></div>
</body>
</html>