요소를 동적이게 움직이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.7.0.js"></script>
<style>
div {
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<button>
click
</button>
<script>
$("button").on("click", () => {
$("div")
.stop()
.animate({width : "300px"}, 2000) // 수치화 할 수 있는 값만 애니메이트 가능
.animate({width : "50px"}, 2000)
.animate({height : "500px"}, 1000)
})
</script>
</body>
</html>
div요소를 click버튼을 클릭하면 모양을 변화시키는 코드를 짜려고한다. div로 정사각형을 만들어준다.
버튼 태그에 클릭 이벤트(.on)를 걸어주고 클릭하면 div의 너비와 높이를 변화 시킬 것이다. 변화시킬 때 사용하는 건 animate다.
animate({객체}, ~동안)
'Front-End > 4. jQuery' 카테고리의 다른 글
| Ex08_포켓몬도감.html (0) | 2023.06.26 |
|---|---|
| Ex07_비동기 통신.html (0) | 2023.06.22 |
| Ex05_jQuery추가삭제.html (0) | 2023.06.22 |
| Ex04_입력 요소.html (0) | 2023.06.21 |
| Ex03_jQuery_클래스변경.html (0) | 2023.06.21 |
