카테고리 없음
효과 메서드
깡출깡충
2024. 8. 29. 12:10
목차
- 효과 메서드
- 애니메이션 메서드
- 애니메이션 효과 제어 메서드
- 애니메이션 적용 원리와 큐의 개념
- stop() / delay()
- delay()메서드
- queue() / dequeue()
- clearQueue()메서드
효과 메서드
효과 메서드를 이용하면 css스타일을 이용하는것 보다 쉽고 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보이게 만들 수 있습니다.
또한 애니메이션 메서드까지 사용하면 다양한 동작(Motion)까지 적용할 수 있습니다.
(종류)
<숨김>
- hide() : display:none과 같이 요소를 숨깁니다.
- fadeOut() : 요소가 점점 투명해지면서 숨겨집니다.
- slideUp() : 요소가 위로 접히면서 숨겨집니다.
<노출>
- show() : display:block과 같이 요소를 나타냅니다.
- fadeIn() : 숨겨진 요소가 점점 선명해지면서 나타납니다.
- slideDown() : 숨겨진 요소가 아래로 펼쳐지며 나타납니다.
<숨김, 노출>
- toggle() : show(), hide() 효과를 적용합니다.
- fadeToggle() : fadeOut(), fadeIn() 효과를 적용합니다.
- slideToggle() : slideUp(), slideDown() 효과를 적용합니다.
- fadeTo() : 지정한 투명도를 적용합니다.
(기본형)
$("요소선택").효과메서드(효과 소요시간, 가속도, 콜백함수);
(fadeTo 기본형)
$("요소선택").fadeTo(효과 소요시간, 투명도(0~1사이의 값), 콜백함수)
- 효과 소요시간 : 요소를 숨기거나 노출할때 소요되는 시간을 말합니다. 단위는 ms단위를 사용합니다.
또는 "slow" , "normal" , "fast"라고 적으면 지정된 소요시간이 적용됩니다.
- 가속도 : 숨기거나 노출하는 동안의 가속도를 결정합니다. 가속도에 적용할 수 있는 값은 "swing" 또는 "linear"를 적용할 수 있습니다. "swing"은 시작과 끝은 느리게, 중간은 빠른속도로 움직이고 "linear"는 일정한 속도를 말합니다. 기본값은 "swing"입니다.
- 콜백함수 : 노출과 숨김 효과가 끝나면 실행할 함수입니다. 콜백함수는 생략할 수 있습니다. 콜백 함수는 익명함수 입니다.
효과 메서드 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>효과 메서드</title>
<script src="./js/jquery.min.js"></script>
<style>
.box {
width: 700px;
height: 300px;
padding: 20px;
box-sizing: border-box;
background-color: azure;
font-size: 24px;
}
button {
font-size: 24px;
padding: 4px 16px;
border: 2px solid thistle;
background-color: pink;
border-radius: 50px;
}
button:hover {
background-color: purple;
color: #fff;
}
.btn5 {
margin-left: 20px;
}
</style>
</head>
<body>
<p>
<button class="btn1">slideUp</button>
<button class="btn2">fadeIn</button>
</p>
<p>
<button class="btn3">slideToggle</button>
</p>
<p>
<button class="btn4">fadeTo(0.3)</button>
<button class="btn5">fadeTo(1)</button>
</p>
<div class="box">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla magnam
temporibus animi? Nulla labore modi mollitia provident! Animi quasi nobis
numquam velit obcaecati distinctio dolorem fugit? Incidunt odio ex
distinctio.
</div>
<script>
$(function () {
// fadeIn버튼 숨기기
$(".btn2").hide();
// slideUp버튼을 클릭하면 실행됩니다.
$(".btn1").on("click", function () {
// .box를 1초동안 일정한 속도로 slideUp하고,
$(".box").slideUp(1000, "linear", function () {
// slideUp효과가 끝나면 .btn1(slideUp버튼)을 숨기고
$(".btn1").hide();
// 숨겨놨던 fadeIn버튼 나타내기
$(".btn2").show();
});
});
// fadeIn버튼을 누르면 실행합니다.
$(".btn2").on("click", function () {
// .box를 1초동안 swing한 속도로 나타냅니다.
$(".box").fadeIn(1000, "swing", function () {
// fadeIn효과가 끝나면 .btn2(fadeIn버튼)은 숨기고
$(".btn2").hide();
// sideUp버튼은 다시 나타내기
$(".btn1").show();
});
});
// slideToggle버튼을 누르면 실행합니다.
$(".btn3").on("click", function () {
// .box를 접어서 숨기거나 펼쳐서 나타냅니다.
// .box가 숨겨져 있으면 펼치지고, 나타나져 있으면 접어서 숨깁니다.
$(".box").slideToggle(500, "linear");
});
// fadeTo(0.3)버튼을 누르면 실행합니다.
$(".btn4").on("click", function () {
// .box를 "fast"한 속도로 30%선명하게 나타냅니다.
$(".box").fadeTo("fast", 0.3);
});
// fadeTo(1)버튼을 누르면 실행합니다.
$(".btn5").on("click", function () {
// .box를 "slow"한 속도로 100%선명하게 나타냅니다.
$(".box").fadeTo("slow", 1);
});
});
</script>
</body>
</html>
애니메이션 메서드
애니메이션 메서드를 사용하면 선택한 요소에 스타일을 적용한 움직임을 만들어 낼 수 있습니다.
애니메이션을 적용하기 위해서는 .animate()메서드를 사용합니다.
(기본형)
$("요소선택").animate({css스타일 속성 : 값}, 효과 적용 시간, 가속도, 콜백함수)
- {css스타일 속성 : 값} : 애니메이션으로 적용할 css스타일을 넣습니다.
이때 객체로 넣어야 하며 속성 : "값"으로 구분하여 작성합니다.
- 효과 적용 시간 : 동작에 반응하는데 소요되는 시간을 뜻합니다. 적용시간은 "fast" , "slow" , "normal"이나 ms단위로 숫자를 넣습니다.
- 가속도 : "swing"이나 "linear"을 넣을 수 있습니다. 효과 메서드와 동일합니다.
- 콜백함수 : 생략이 가능하며 애니메이션 효과가 끝나면 실행할 함수입니다.
애니메이션 메서드 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션 메서드</title>
<script src="./js/jquery.min.js"></script>
<style>
.txt1 {
background-color: azure;
}
.txt2 {
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<button class="btn1">버튼1</button>
</div>
<span class="txt1">"500px" 이동</span>
<div>
<button class="btn2">버튼2</button>
</div>
<span class="txt2">"50px" 이동</span>
<script>
$(function () {
// .btn1을 누르면 이벤트를 실행합니다.
$(".btn1").on("click", function () {
// .txt1을 1초동안 일정한 속도로 500px을 움직입니다.
// 애니메이션 동작이 끝나면 alert창이 실행됩니다.
// fontSize도 "30px" 커집니다.
$(".txt1").animate(
{
marginLeft: "500px",
fontSize: "30px",
},
1000,
"linear",
function () {
alert("모션완료!");
}
);
});
// .btn2를 클릭할때마다 이벤트 실행합니다.
$(".btn2").on("click", function () {
// .txt2를 0.5초동안 50px씩 이동시킵니다.
// 가속도를 지정하지 않으면 기본값인 "swing"이 적용됩니다.
$(".txt2").animate(
{
marginLeft: "+=50px",
// marginLeft = marginLeft(기본값 : 0) + 50px
},
500
);
});
});
</script>
</body>
</html>
애니메이션 효과 제어 메서드
애니메이션 효과 제어 메서드는 "효과" 또는 "애니메이션"이 적용된 요소의 동작을 제어하는 메서드 입니다.
이 메서드를 사용하려면 queue의 개념을 이해하고 있어야 합니다.
애니메이션 적용 원리와 큐의 개념
애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장됩니다.
큐는 마치 은행의 ATM기기를 통해 은행 일을 보는 사람들처럼 줄을 서서 대기하는 공간과 비슷합니다.
큐에 저장된 애니메이션이나 효과는 큐(queue)에 순서대로 대기하고 애니메이션이 순서대로 실행되고 끝나면 다음 애니메이션이 실행됩니다.
이렇게 먼저 들어간 데이터가 먼저 처리되는 형식을 FIFO(First In First Out)방식이라고 부릅니다.
[애니메이션 효과 제어 메서드의 종류]
- stop() : 현재 실행중인 효과를 모두 중지시킵니다.
- delay() : 지정한 시간만큼 지연했다가 애니메이션을 진행합니다.
- queue() : 큐에 사용자 정의 함수를 추가하거나 큐의 대기중인 함수를 배열에 담아 반환합니다.
그리고 queue()메서드 이후의 애니메이션 효과 메서드는 모두 취소됩니다.
- dequeue() : queue()메서드를 사용하면 대기하고 있던 애니메이션 메서드가 모두 취소되는데,
dequeue()메서드를 사용하면 애니메이션 메서드가 제거되는것을 막을 수 있습니다.
- clearQueue() : 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기중인 애니메이션은 모두 제거합니다.
- finish() : 선택한 요소의 진행중인 애니메이션을 강제로 완료시점으로 보낸 후 종료합니다.
stop() / delay()
stop()메서드는 요소에 적용한 애니메이션을 중지시키고, delay()는 지연시킨후에 애니메이션을 진행합니다.
(기본형)
- $("요소선택").stop();
: 진행중인 첫번째 애니메이션만 정지시킵니다. 큐에 대기중인 애니메이션은 계속해서 실행합니다.
- $("요소선택").stop(clearQueue, finish);
: clearQueue, finish 자리에는 true나 false를 입력할 수 있습니다. 기본값은 false입니다.
clearQueue가 true면 큐에서 대기중인 애니메이션을 모두 지우고,
finish가 true면 진행중인 애니메이션을 강제 종료합니다.
애니메이션 효과 제어 메서드 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션 효과 제어 메서드</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div class="txt1">애니메이션1</div>
<div class="txt2">애니메이션2</div>
<script>
$(function () {
// 1. opacity를 1초동안 50% 투명하게 만듭니다.
// 2. marginLeft를 0.5초동안 300px만큼 이동시킵니다.
$(".txt1")
.animate({ opacity: 0.5 }, 1000)
.animate({ marginLeft: "300px" }, 500);
// 첫번째 애니메이션인 opacity가 취소되고 marginLeft만 실행됩니다.
$(".txt1").stop();
$(".txt2")
.animate({ opacity: 0.5 }, 500)
.animate({ marginLeft: "300px" }, 500);
// 대기중인 애니메이션은 제거하고 진행중인 애니메이션은 강제로 종료시점으로 보냅니다.
$(".txt2").stop(true, true);
});
</script>
</body>
</html>
delay()메서드
애니메이션의 실행을 지연시키는 메서드 입니다. 인자값은 ms단위로 전달합니다.
(기본형)
$("요소선택").delay(지연시간ms).animate({css속성:값}, 소요시간, 가속도, 콜백함수)
delay()메서드 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션 효과 제어 메서드</title>
<script src="./js/jquery.min.js"></script>
<style>
p {
width: 110px;
text-align: center;
}
.txt1 {
background-color: azure;
}
.txt2 {
background-color: pink;
}
.txt3 {
background-color: thistle;
}
.txt4 {
background-color: peachpuff;
}
.txt5 {
background-color: palegoldenrod;
}
</style>
</head>
<body>
<p class="txt1">효과1</p>
<p class="txt2">효과2 delay(2000)</p>
<p>
<button class="btn1">50px 전진</button>
</p>
<p class="txt3">효과3</p>
<p class="txt4">효과4 stop()</p>
<p class="txt5">효과5 stop(true, true)</p>
<script>
$(function () {
$(".txt1").animate({ marginLeft: "300px" }, 1000);
$(".txt2").delay(2000).animate({ marginLeft: "300px" }, 1000);
$(".btn1").on("click", moveElement);
function moveElement() {
$(".txt3").animate({ marginLeft: "+=50px" }, 800);
$(".txt4").animate({ marginLeft: "+=50px" }, 800);
$(".txt4").stop();
$(".txt5").animate({ marginLeft: "+=50px" }, 800);
$(".txt5").stop(true, true);
}
});
</script>
</body>
</html>
queue() / dequeue()
queue()메서드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가합니다.
queue()메서드를 실행하면 실행 이후의 모든 애니메이션이 취소됩니다.
dequeue()메서드는 queue()메서드 실행 이후에 적용된 애니메이션이 취소되지 않게 연결해주는 역할을 합니다.
(기본형)
1. 큐의 함수를 반환 시킬때
$("요소선택").queue();
2. 큐에 함수를 추가할때
$("요소선택").queue(function(){코드});
3. dequeue()메서드
$("요소선택").dequeue();
queue() / dequeue() 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션 효과 제어 메서드</title>
<script src="./js/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.txt1 {
width: 150px;
text-align: center;
color: #fff;
background-color: plum;
}
</style>
</head>
<body>
<p class="txt1">moving</p>
<script>
$(function () {
$(".txt1")
.animate({ marginLeft: "200px" }, 1000)
.animate({ marginTop: "200px" }, 1000)
.queue(function () {
$(this).css({ backgroundColor: "blue" });
$(this).dequeue(); // queue에 의해 취소되는 아래 애니메이션들을 다시 연결해줍니다.
})
.animate({ marginLeft: "0px" }, 1000)
.animate({ marginTop: "0px" }, 1000);
});
</script>
</body>
</html>
clearQueue()메서드
clearQueue()메서드는 진행중인 첫번째 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거합니다.
(기본형)
$("요소선택").clearQueue();
clearQueue()메서드 사용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션 효과 제어 메서드</title>
<script src="./js/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.txt2,
.txt3 {
width: 100px;
text-align: center;
color: #fff;
background-color: thistle;
margin-top: 10px;
position: absolute;
top: 400px;
}
.txt3 {
top: 440px;
}
</style>
</head>
<body>
<!-- clearQueue()메서드 -->
<p class="txt2">내용1</p>
<p class="txt3">내용2</p>
<script>
$(function () {
$(".txt2")
.animate({ marginLeft: "100px" }, 500) // 100px의 위치로 이동
.animate({ marginLeft: "300px" }, 500) // 300px의 위치로 이동
.animate({ marginLeft: "400px" }, 500); // 400px의 위치로 이동
$(".txt3")
.animate({ marginLeft: "100px" }, 500) // 100px의 위치로 이동
// 아래의 대기중인 애니메이션은 clearQueue에 의해 더이상 실행하지 않습니다.
.animate({ marginLeft: "300px" }, 500) // 300px의 위치로 이동
.animate({ marginLeft: "400px" }, 500); // 400px의 위치로 이동
$(".txt3").clearQueue();
});
</script>
</body>
</html>
애니메이션 실습하기
지금까지 배운 내용을 토대로 버튼을 클릭하면 10씩 앞으로
혹은 뒤로 이동하는 애니메이션 효과를 구현해보았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>애니메이션 실습</title>
<script src="./js/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1000px;
height: 30px;
border: 1px solid palegreen;
margin-top: 20px;
}
.txt {
width: 50px;
text-align: center;
background-color: azure;
line-height: 30px;
}
</style>
</head>
<body>
<div class="btnwrap">
<button class="back">Back</button>
<button class="go">Go</button>
</div>
<div class="wrap">
<p class="txt">게이지</p>
</div>
<script>
$(function () {
// 게이지
let txt = $(".txt");
// 카운트
let count = 1;
$(".btnwrap button").on("click", function () {
// 만약 게이지가 애니메이션 동작 상태가 아니면(!) true를 반환
if (!txt.is("animated")) {
// 만약에 this(내가 클릭한 버튼)의 class가 back이면
if ($(this).hasClass("back")) {
count--; // 카운트 1씩 감소
if (count < 1) {
// 만약 카운트가 1보다 작으면
count = 1; // 카운트 변수를 다시 1로 만들고
return false; // 함수 종료
}
txt.animate({ marginLeft: "-=10%" }, 300); // 게이지 위치를 10%씩 왼쪽으로 0.3초동안 이동
} else {
// 내가 클릭한 버튼이 class가 back이 아니면 (Go)이면
count++; // 카운트 1씩 증가
if (count > 10) {
// 만약에 카운트가 10보다 크면
count = 10; // 카운트를 10으로 만들고
return false; // 함수 종료
}
txt.animate({ marginLeft: "+=10%" }, 300); // 게이지 위치를 10%씩 오른쪽으로 0.3초동안 이동
}
}
});
});
</script>
</body>
</html>