1. JQuery 애니메이션
Jquery에서 애니메이션을 사용하는 방법으로 DOM 요소를 쉽게 선택하고 애니메이션 효과를 적용할 수 있는 강력한 기능을 제공합니다. 기본적인 애니메이션 메소드들은 아래와 같습니다.
- .show(): 요소를 보이게 함
- .hide(): 요소를 숨김
- .fadeIn(): 요소를 서서히 보이게 함
- .fadeOut(): 요소를 서서히 숨김
- .slideDown(): 요소를 아래로 슬라이드하여 보이게 함
- .slideUp(): 요소를 위로 슬라이드하여 숨김
2. 커스텀 애니메이션 사용 예제
아래 JQuery를 사용하여 다양한 애니메이션 효과를 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JQuery Animation</title>
<script src="../version/jquery-3.7.1.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: hsl(0, 0%, 20%);
display: none;
}
</style>
</head>
<body>
<button id="fadeButton">Fade In/Out</button>
<button id="slideButton">Slide Up/Down</button>
<button id="animateButton">Animation</button>
<div id="box"></div>
<script>
$(document).ready(function () {
$("#fadeButton").click(function () {
$("#box").fadeToggle(1000); // 1 sec fade in/out
});
// slide up/down
$("#slideButton").click(function () {
$("#box").slideToggle(1000); // 1sec slide up/down
});
// Custom Animation
$("#animateButton").click(function () {
$("#box").css("display", "block"); // box show
$("#box").animate(
{
width: "200px",
height: "200px",
opacity: 0.5,
},
1000
);
});
});
</script>
</body>
</html>
GitHub - jQuicker/jQuery-bloging
Contribute to jQuicker/jQuery-bloging development by creating an account on GitHub.
github.com
LIST
'Back-End > JQuery' 카테고리의 다른 글
| [JQuery] 4장 JQuery 이벤트 처리 (0) | 2025.03.01 |
|---|---|
| [JQuery] 3장 JQuery DOM 조작 (0) | 2025.02.27 |
| [JQuery] 2장 JQuery 기본 문법 (0) | 2025.02.24 |
| [JQuery] 1장 JQuery는 무엇인가? Jquery세팅법 (1) | 2025.02.16 |