🚀 jQuery UI 다운로드 바로가기
- 다운로드 후 jquery-ui.js & jquery-ui.css 파일 옮기기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!--
easing 사용하기
jqueryui.com/easing에서 미리보기 가능
jqueryui.com/download/all에서 jqueryui를 다운로드한다.
1. jquery-ui js
2. jquery-ui css
-->
</head>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui-min.css" type="text/css" />
<style>
#li, #i2, #i3 {width: 100px; height:100px; position:absolute;}
#i1{background:orange;}
</style>
<body>
<div id="i1"></div>
<img id="i2" src="../img/swisda.jpg" />
<img id="i3" src="../img/natural04.png" />
<script>
$(function(){
//애니메이션
//시간
//animate ({JSON으로 옵션}, 시간, easing, 콜백함수)
$("#i1")
.animate({marginLeft:'1000px', marginTop:'500px', opacity:0.5
,width:'200px', height:'250px'}, 3000);
$("#i2")
.animate({marginLeft:'900px', marginTop:'200px'}, 3000);
//출발 지연시키기
$("#i3")
.delay(3000)
.animate({marginLeft:'1200px', marginTop:'10px'}, 6000, 'easeOutBounce')
//마우스 오버시 animate 중지 시키기
$("#i1, #i2, #i3 ").mouseover(function(){
$(this).stop();
})
})
</script>
</body>
</html>
풀스택eDot