[JS + jquery] 애니메이션 효과 제어 메서드 (queue(), dequeue(), stop(), clearQueue(), finish(), delay() )

[JS + jquery] 애니메이션 효과 제어 메서드 (queue(), dequeue(), stop(), clearQueue(), finish(), delay() )

2021. 11. 1. 11:21ㆍHTML + CSS + JS/JS 자바스크립트

728x90

1. 애니메이션 효과 제어 메서드

애니메이션 효과 제어 메서드란 '효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메서드이다.

애니메이션 메서드는 함수가 적용된 순서대로 큐(queue) 라는 저장소에 저장된다.

- 애니메이션 효과 제어 메서드 종류

stop() 현재 실행 중인 효과를 모두 정지시킨다.

delay() 지정한 시간만큼 지연했다가 애니메이션을 진행한다.

queue() 큐에 사용자 정의 함수를 추가하거나 큐에 대기중인 함수를 배열에 담아 반환한다.

-> 그리고 queue() 메서드 이후의 애니메이션 효과 메서드는 모두 취소한다.

clearQueue() 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션은 모두 제거한다.

dequeue() queue()메서드를 이용하면 대기하고 있는 애니메이션 메서드는 제거되는데 dequeue() 메서드를 이용하면 메서드가 제거되는 것을 막을 수 있다.

finish() 선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료한다.

1️⃣ stop()/ delay() 메서드

stop() 메서드는 요소에 적용한 애니메이션을 정지시키고, delay() 메서드는 요소에 적용한 애니메이션을 지정한 시간만큼 지연시킨다.

$("요소 선택").stop();

-> 진행 중인 첫번째 애니메이션만 정지시킨다.

$("요소 선택").stop(clearQueue, finish);

-> clearQueue, finish는 true나 false 로 값을 입력할 수 있다.

clearQueue가 true면 큐에서 대기중인 애니메이션을 모두 제거하고, finish가 true이면 진행중인 애니메이션을 강제로 종료한다.

stop()은 현재 진행중인 애니메이션만 정지시킨다.

stop(true, ture)는 저장소에 대기 중인 애니메이션을 제거하고, 현재 진행중인 애니메이션도 종료된 시점으로 이동한다.

2️⃣ queue() / dequeue() 메서드

queue() 메서드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가한다.

이때 queue() 메서드를 실행하면 실행 이후의 모든 애니메이션이 취소된다.

이때 취소되지 않게 연결해주기 위해서 dequeue() 메서드를 사용하면 queue() 메서드 실행 이후에 적용된 애니메이션 메서드가 취소되지 않게 연결해준다.

- 큐(Queue) 의 함수 반환

$("요소 선택").queue();

- 큐(Queue)에 함수 추가

$("요소 선택").queue(function() {자바스크립트 코드;});

- dequeue() 메서드

$("요소 선택").dequeue();

저기서 dequeue()를 생략했다면 queue() 메서드 실행 이후에 적용된 애니메이션들이 동작하지 않았을 것이다.

3️⃣ clearQueue() 메서드

clearQueue() 메서드는 진행 중인 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거한다.

$("요소 선택").clearQueue();

내용2는 clearQueue때문에 진행중인 첫번째 애니메이션을 제외하고 나머지 함수들은 제거돼서 더이상 움직이지 않는다.

* 연습문제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 효과와 애니메이션 </title>  
<script src="js/jquery.js"></script>
<script>
$(function() {
	var txt1 = $(".txt1");
	var count = 1;

	$(".btnWrap button").on("click", function() {
		if(!txt1.is(":animated")) {
			if($(this).hasClass("backBtn")) {
				count --; 
				if(count < 1) {
					count = 1;
					return fasle;
				}

				txt1.animate({marginLeft : "-=10%"}, 300);
			}else {
				count++;
				if(count > 10) {
					count = 10;
					return false;
				}

				txt1.animate({marginLeft : "+=10%"}, 300);
			}
		}
	});
});
</script>
<style>
	*{margin:0;padding:0;}
	body{padding:20px;}
	.btnWrap{margin-bottom: 10px;}
	.wrap{
		max-width:600px;
		border: 1px solid #000; 
	}
	.txt1{width:10%; text-align:center;
	background-color: aqua;}
</style>
</head>
<body>
	<p class="btnWrap">
		<button class="backBtn">Back</button>
		<button class="goBtn">Go</button>
	</p>
	<div class="wrap">
		<p class="txt1">내용1</p>
	</div>
</body>
</html>

728x90

'HTML + CSS + JS > JS 자바스크립트' 카테고리의 다른 글

[JS + jquery] Ajax (0)	2021.11.02
[JS + jquery] 효과 메서드와 애니메이션 메서드 기초 연습문제 1, 2 (0)	2021.11.01
[JS + jquery] 효과 메서드와 애니메이션 메서드 (0)	2021.11.01
[JS + jquery] 제이쿼리 그룹 이벤트 등록 및 삭제 (on(), delegate(), bind(), one(), off(), unbind(), undelegate()) (0)	2021.10.29
[JS + jquery] 제이쿼리 이벤트 객체와 종류, 포커스 이벤트, 키보드 이벤트 (scroll(), focus(), blur(), focusin(), focusout(), change(), keydown(), keyup(), keypress(), $(this), index()) (0)	2021.10.29

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS > JS 자바스크립트' 카테고리의 다른 글

관련글

티스토리툴바