애니메이션 효과 제어 메서드
queue() : 큐에 적용된 애니메니션 함수를 반환하거나 큐에 지정된 함수를 추가
queue() 메서드를 실행하면 실행 이후의 모든 애니메이션이 취소
dequeue() : queue() 메서드 실행 이후에 적용된 애니메이션 메서드가 취소되지 않게 연결 해줌
기본형
1) 큐 (Queue)의 함수 반환
$("요소 선택").queue();
2) 큐 (Queue)에 함수 추가
$("요소 선택").queue(function() { 자바스크립트 코드 });
3) dequeue() 메서드
$("요소 선택").dequeue();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
/*
*/
$(function() {
$('.txt1')
.animate({marginLeft: '200px'}, 1000)
.animate({marginTop: '200px'}, 1000)
.queue(function() {
$(this).css({background: 'red'}); // .queue 때문에 컬러가 레드까지만 바뀌고 뒤에껀 실행이 안됨
$(this).dequeue(); // .dequeue()가 있으면 뒤의 애니메이션이 연결됨
})
.animate({marginLeft: '0px'}, 1000)
.animate({marginTop: '0px'}, 1000);
});
</script>
<style>
* {
margin: 0;
}
.txt1 {
width: 50px; text-align: center; background-color: aqua;
}
</style>
</head>
<body>
<p class="txt1">내용1</p>
</body>
</html>
