코밍이의 하루
[JQuery] 애니메이션 효과 제어 메소드 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3, JS, jQuery |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) 애니메이션 효과 제어 메소드
- '효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메소드
2) 애니메이션 적용 원리와 큐의 개념
- 애니메이션 메소드는 함수가 적용된 순서대로 큐라는 저장소에 저장
- 큐에 저장된 애니메이션 대기실이 있다면 먼저 들어간 애니메이션이 먼저 실행(FIFO)
※FIFO(First In First Out) : 먼저 들어간 데이터가 먼저 처리
- 애니메이션 효과 제어 메소드 종류
| 종류 | 설명 |
| stop() | 현재 실행 중인 효과를 모두 정지 |
| delay() | 지정한 시간만큼 지연했다가 애니메이션을 진행 |
| queue() | - 큐에 사용자 정의 함수를 추가하거나 큐에 대기 중인 함수를 배열에 담아 반환 - queue() 메소드 이후의 애니메이션 효과 메소드는 모두 취소 |
| clearQueue() | 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션은 모두 제거 |
| dequeue() | - queue() 메소드를 이용하면 대기하고 있는 애니메이션 메소드 제거 - dequeue() 메소드를 이용하면 메소드가 제거되는 것을 막을 수 있음 |
| finish() | 선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료 |
3) stop() / delay() 메소드
- stop() 메소드 : 요소에 적용한 애니메이션 정지
- delay() 메소드 : 요소에 적용한 애니메이션을 지정한 시간만큼 지연
| 기본형 |
| $("요소 선택").stop(); $("요소 선택").stop(clearQueue, finish); |
| $("요소 선택").delay(지연 시간).애니메이션 효과 메소드(); |
- clearQueue가 true면 큐에서 대기 중인 애니메이션 모두 제거
- finish가 true면 진행 중인 애니메이션 강제 종료
4) queue() /dequeue() 메소드
- queue() 메소드 : 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수 추가, 실행 이후 모든 애니메이션 취소
- dequeue() 메소드 : queue() 메소드 실행 이후에 적용된 애니메이션 메소드가 취소되지 않게 연결
| 기본형 |
| ① 큐(Queue)의 함수 반환 $("요소 선택").queue(); |
| ② 큐(Queue)에 함수 추가 $("요소 선택").queue( function() { 자바스크립트 코드 }); |
| ③ dequeue() 메소드 $("요소 선택").dequeue(); |
5) clearQueue() 메소드
- 진행 중인 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수 제거
| 기본형 |
| $("요소 선택").clearQueue(); |
3. 소스 코드 및 실행 결과
- jquery_effect1_3_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".txt1").animate({marginLeft: "300px"},1000);
$(".txt2").delay(3000)
.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>
<style>
p{width: 110px;text-align: center;}
.txt1{background-color: aqua;}
.txt2{background-color: pink;}
.txt3{background-color: orange;}
.txt4{background-color: green;}
.txt5{background-color: gold;}
</style>
</head>
<body>
<p class="txt1">효과1</p>
<p class="txt2">효과2<br> delay(3000)</p>
<p><button class="btn1">50px 전진</button></p>
<p class="txt3">효과3</p>
<p class="txt4">효과4<br>stop( )</p>
<p class="txt5">효과5<br>stop(true, true)</p>
</body>
</html>
- jquery_effect1_4_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".txt1")
.animate({marginLeft:"200px"},1000)
.animate({marginTop:"200px"},1000)
.queue(function(){
$(this).css({background : "red"});
$(this).dequeue();
})
.animate({marginLeft:0},1000)
.animate({marginTop:0},1000);
});
</script>
<style>
*{margin:0;}
.txt1{width:50px;text-align:
center;background-color: aqua;}
</style>
</head>
<body>
<p class="txt1">내용1</p>
</body>
</html>
- jquery_effect1_5_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$(".txt1")
.animate({marginLeft:"100px"}, 1000)
.animate({marginLeft:"300px"}, 1000)
.animate({marginLeft:"400px"}, 1000);
$(".txt2")
.animate({marginLeft:"100px"}, 1000)
.animate({marginLeft:"300px"}, 1000)
.animate({marginLeft:"400px"}, 1000);
$(".txt2").clearQueue();
});
</script>
<style>
.txt1, .txt2{width:50px; text-align:
center; background-color: aqua;}
.txt2{background-color:orange;}
</style>
</head>
<body>
<p class="txt1">내용1</p>
<p class="txt2">내용2</p>
</body>
</html>
'웹언어 공부 > JQuery' 카테고리의 다른 글
| [JQuery] Ajax 관련 메소드 (0) | 2021.08.23 |
|---|---|
| [JQuery] Ajax (0) | 2021.08.23 |
| [JQuery] 효과 및 애니메이션 메소드 (0) | 2021.08.20 |
| [JQuery] 그룹 이벤트 등록 및 삭제하기 (0) | 2021.08.20 |
| [JQuery] 이벤트 객체와 종류 (0) | 2021.08.20 |
