[jQuery] 애니메이션(Animation)
2022. 6. 14. 17:27ㆍJavaScript/jQuery
1. 애니메이션
- jQuery는 개발자가 직접 애니메이션을 만들어 사용할 수 있도록 지원하고 있습니다.
- 선택된 태그에 css 값을 새롭게 설정해 주면 중간의 애니메이션을 모두 만들어 주고 태그에 변화를 주게 됩니다.
2. 애니메이션 사용하기
- animate : 지정된 css 속성을 애니메이션 효과와 함께 지정합니다.
- animate({ }) : 지정된 객체의 css 속성들을 애니메이션 효과와 함께 지정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function setSize(){
$("#a1").animate({
width : 400, height : 400
},"slow");
}
function setOpacity(){
$("#a1").animate({
opacity : 0
},"slow");
}
function setPosition(){
$("#a1").animate({
left : 100,
top : 100
},"slow");
}
function setTotal(){
$("#a1").animate({
width : 400,
height : 400,
opacity : 0.5,
left : 100,
top : 100
},"slow");
}
function setSequence(){
$("#a1").animate({
width : 400,
height : 400
},"slow").animate({
opacity : 0.5
},"slow").animate({
left : 100,
top : 100
},"slow");
}
</script>
<style>
#a1{
border : 1px solid black;
background-color: yellow;
width : 200px;
height : 200px;
position: relative;
}
</style>
</head>
<body>
<button onclick="setSize()">size 설정</button>
<button onclick="setOpacity()">opacity 설정</button>
<button onclick="setPosition()">위치 설정</button>
<button onclick="setTotal()">종합 설정</button>
<button onclick="setSequence()">순차 설정</button>
<div id="a1"></div>
</body>
</html>
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/Animate/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] Ajax(Asynchronous JavaScript and XML) (0) | 2022.06.14 |
|---|---|
| [jQuery] jQuery 효과 (Show/Hide, Fade, Slide, Callback) (0) | 2022.06.13 |
| [jQuery] 태그 탐색 2 (siblings, next, prev) (0) | 2022.06.13 |
| [jQuery] 태그 탐색 1 (parent, child) (0) | 2022.06.13 |
| [jQuery] CSS 제어 (0) | 2022.06.13 |